@lemoncat7/dsh-knowledge 1.1.5 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/README.md +24 -4
  2. package/docs/architecture.md +32 -6
  3. package/docs/requirements.md +10 -0
  4. package/lib/api.d.ts +2 -0
  5. package/lib/api.d.ts.map +1 -1
  6. package/lib/api.js +235 -13
  7. package/lib/api.js.map +1 -1
  8. package/lib/atomic-file.d.ts +16 -0
  9. package/lib/atomic-file.d.ts.map +1 -0
  10. package/lib/atomic-file.js +92 -0
  11. package/lib/atomic-file.js.map +1 -0
  12. package/lib/client.d.ts.map +1 -1
  13. package/lib/client.js +38 -35
  14. package/lib/client.js.map +2 -2
  15. package/lib/config.d.ts.map +1 -1
  16. package/lib/config.js +2 -5
  17. package/lib/config.js.map +1 -1
  18. package/lib/connection.d.ts.map +1 -1
  19. package/lib/connection.js +5 -15
  20. package/lib/connection.js.map +1 -1
  21. package/lib/content-safety.d.ts +12 -0
  22. package/lib/content-safety.d.ts.map +1 -0
  23. package/lib/content-safety.js +38 -0
  24. package/lib/content-safety.js.map +1 -0
  25. package/lib/documents/projection-queue.d.ts +10 -0
  26. package/lib/documents/projection-queue.d.ts.map +1 -0
  27. package/lib/documents/projection-queue.js +21 -0
  28. package/lib/documents/projection-queue.js.map +1 -0
  29. package/lib/documents/store.d.ts +4 -2
  30. package/lib/documents/store.d.ts.map +1 -1
  31. package/lib/documents/store.js +54 -73
  32. package/lib/documents/store.js.map +1 -1
  33. package/lib/domain.d.ts +13 -0
  34. package/lib/domain.d.ts.map +1 -1
  35. package/lib/domain.js.map +1 -1
  36. package/lib/extraction.d.ts.map +1 -1
  37. package/lib/extraction.js +18 -4
  38. package/lib/extraction.js.map +1 -1
  39. package/lib/index.d.ts +1 -0
  40. package/lib/index.d.ts.map +1 -1
  41. package/lib/index.js +91 -32
  42. package/lib/index.js.map +1 -1
  43. package/lib/knowledge-merge.d.ts +8 -0
  44. package/lib/knowledge-merge.d.ts.map +1 -0
  45. package/lib/knowledge-merge.js +19 -0
  46. package/lib/knowledge-merge.js.map +1 -0
  47. package/lib/local-provider.d.ts +26 -1
  48. package/lib/local-provider.d.ts.map +1 -1
  49. package/lib/local-provider.js +402 -63
  50. package/lib/local-provider.js.map +1 -1
  51. package/lib/management-proxy.d.ts.map +1 -1
  52. package/lib/management-proxy.js +22 -13
  53. package/lib/management-proxy.js.map +1 -1
  54. package/lib/note-reference-handle.d.ts +15 -0
  55. package/lib/note-reference-handle.d.ts.map +1 -0
  56. package/lib/note-reference-handle.js +54 -0
  57. package/lib/note-reference-handle.js.map +1 -0
  58. package/lib/note-reference-tools.d.ts +6 -0
  59. package/lib/note-reference-tools.d.ts.map +1 -0
  60. package/lib/note-reference-tools.js +119 -0
  61. package/lib/note-reference-tools.js.map +1 -0
  62. package/lib/note-tools.d.ts +6 -0
  63. package/lib/note-tools.d.ts.map +1 -0
  64. package/lib/note-tools.js +283 -0
  65. package/lib/note-tools.js.map +1 -0
  66. package/lib/notes/domain.d.ts +44 -0
  67. package/lib/notes/domain.d.ts.map +1 -0
  68. package/lib/notes/domain.js +38 -0
  69. package/lib/notes/domain.js.map +1 -0
  70. package/lib/notes/store.d.ts +39 -0
  71. package/lib/notes/store.d.ts.map +1 -0
  72. package/lib/notes/store.js +407 -0
  73. package/lib/notes/store.js.map +1 -0
  74. package/lib/provider.d.ts +17 -0
  75. package/lib/provider.d.ts.map +1 -1
  76. package/lib/remote-provider.d.ts +19 -0
  77. package/lib/remote-provider.d.ts.map +1 -1
  78. package/lib/remote-provider.js +172 -14
  79. package/lib/remote-provider.js.map +1 -1
  80. package/lib/remote-url.d.ts +2 -0
  81. package/lib/remote-url.d.ts.map +1 -0
  82. package/lib/remote-url.js +14 -0
  83. package/lib/remote-url.js.map +1 -0
  84. package/lib/runtime.d.ts +1 -0
  85. package/lib/runtime.d.ts.map +1 -1
  86. package/lib/runtime.js.map +1 -1
  87. package/lib/service-settings.d.ts.map +1 -1
  88. package/lib/service-settings.js +3 -10
  89. package/lib/service-settings.js.map +1 -1
  90. package/lib/theme-bridge.js +12 -12
  91. package/lib/theme-bridge.js.map +1 -1
  92. package/lib/tool-authorization.d.ts +14 -0
  93. package/lib/tool-authorization.d.ts.map +1 -0
  94. package/lib/tool-authorization.js +124 -0
  95. package/lib/tool-authorization.js.map +1 -0
  96. package/lib/tool-input.d.ts +6 -0
  97. package/lib/tool-input.d.ts.map +1 -0
  98. package/lib/tool-input.js +27 -0
  99. package/lib/tool-input.js.map +1 -0
  100. package/lib/tools.d.ts +2 -1
  101. package/lib/tools.d.ts.map +1 -1
  102. package/lib/tools.js +70 -177
  103. package/lib/tools.js.map +1 -1
  104. package/lib/tracking.d.ts +29 -0
  105. package/lib/tracking.d.ts.map +1 -0
  106. package/lib/tracking.js +141 -0
  107. package/lib/tracking.js.map +1 -0
  108. package/lib/web-change-review.d.ts +34 -0
  109. package/lib/web-change-review.d.ts.map +1 -0
  110. package/lib/web-change-review.js +147 -0
  111. package/lib/web-change-review.js.map +1 -0
  112. package/lib/web-markdown-preview.d.ts.map +1 -1
  113. package/lib/web-markdown-preview.js +10 -0
  114. package/lib/web-markdown-preview.js.map +1 -1
  115. package/lib/web-note-editor.d.ts +44 -0
  116. package/lib/web-note-editor.d.ts.map +1 -0
  117. package/lib/web-note-editor.js +118 -0
  118. package/lib/web-note-editor.js.map +1 -0
  119. package/lib/web.d.ts.map +1 -1
  120. package/lib/web.js +3 -1
  121. package/lib/web.js.map +1 -1
  122. package/package.json +12 -1
  123. package/web/app.js +1888 -154
  124. package/web/change-review.js +5 -0
  125. package/web/index.html +2 -0
  126. package/web/markdown-preview.js +8 -8
  127. package/web/note-editor.js +220 -0
  128. package/web/styles.css +599 -170
package/web/styles.css CHANGED
@@ -1,30 +1,58 @@
1
1
  :root {
2
2
  color-scheme: light dark;
3
- font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
3
+ font-family: var(--font-ui);
4
4
  font-size: 16px;
5
- --bg: #f5f5f7;
6
- --surface: #ffffff;
5
+ --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
6
+ --font-reading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
7
+ --font-mono: "SFMono-Regular", "Cascadia Code", "Cascadia Mono", Menlo, Consolas, monospace;
8
+ --bg: #eef1f3;
9
+ --surface: #f7f9fa;
7
10
  --surface-raised: #ffffff;
8
- --surface-soft: #f0f0f3;
9
- --surface-hover: #f5f5f8;
10
- --dialog-surface: #ffffff;
11
- --text: #1d1d1f;
12
- --text-secondary: #4c4c50;
13
- --text-tertiary: #6e6e73;
14
- --border: #dedee3;
15
- --border-strong: #c7c7cc;
16
- --accent: #086bd8;
17
- --accent-hover: #005ab8;
18
- --accent-soft: #e8f2ff;
19
- --on-accent: #ffffff;
11
+ --surface-soft: #e8ecef;
12
+ --surface-hover: #e3e8eb;
13
+ --dialog-surface: #fbfcfd;
14
+ --text: #202629;
15
+ --text-secondary: #4f595e;
16
+ --text-tertiary: #667178;
17
+ --border: #d5dce0;
18
+ --border-strong: #bcc6cb;
19
+ --accent: #4f7773;
20
+ --accent-hover: #3e6561;
21
+ --accent-soft: #dfeae8;
22
+ --on-accent: #f8fbfa;
20
23
  --success: #18794e;
21
24
  --success-soft: #e8f5ee;
22
25
  --warning: #986800;
23
26
  --warning-soft: #fff4cf;
24
27
  --danger: #c9343a;
25
28
  --danger-soft: #fdebec;
26
- --shadow: 0 18px 48px rgb(30 45 70 / 10%);
27
- --radius: 16px;
29
+ --shadow: 0 1px 2px rgb(25 35 40 / 5%), 0 14px 36px rgb(25 35 40 / 9%);
30
+ --radius: 14px;
31
+ --radius-control: 9px;
32
+ --radius-small: 7px;
33
+ --material-sidebar: color-mix(in srgb, var(--surface) 86%, transparent);
34
+ --material-toolbar: color-mix(in srgb, var(--surface) 90%, transparent);
35
+ --material-panel: color-mix(in srgb, var(--surface-raised) 94%, var(--surface));
36
+ --material-control: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
37
+ --material-control-hover: color-mix(in srgb, var(--surface-hover) 82%, var(--surface));
38
+ --separator: color-mix(in srgb, var(--border) 76%, transparent);
39
+ --panel-border: color-mix(in srgb, var(--border-strong) 58%, var(--border));
40
+ --surface-highlight: color-mix(in srgb, var(--surface-raised) 74%, transparent);
41
+ --shadow-soft: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
42
+ --shadow-panel: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent), 0 12px 32px color-mix(in srgb, var(--text) 6%, transparent);
43
+ --surface-canvas: color-mix(in srgb, var(--bg) 88%, var(--surface));
44
+ --surface-pane: color-mix(in srgb, var(--surface) 88%, var(--surface-raised));
45
+ --surface-editor: color-mix(in srgb, var(--surface-raised) 96%, var(--surface));
46
+ --surface-overlay: color-mix(in srgb, var(--surface-raised) 92%, transparent);
47
+ --shadow-control: 0 1px 2px color-mix(in srgb, var(--text) 7%, transparent), inset 0 1px 0 var(--surface-highlight);
48
+ --shadow-floating: 0 22px 70px color-mix(in srgb, var(--text) 18%, transparent), 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
49
+ --radius-shell: 18px;
50
+ --radius-panel: 12px;
51
+ --motion-fast: 120ms;
52
+ --motion-base: 190ms;
53
+ --motion-slow: 280ms;
54
+ --ease-out: cubic-bezier(.22, .8, .25, 1);
55
+ --ease-spring: cubic-bezier(.2, .9, .25, 1.08);
28
56
  --sidebar-width: 236px;
29
57
  --scrollbar-thumb: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
30
58
  --scrollbar-thumb-hover: color-mix(in srgb, var(--text-secondary) 58%, transparent);
@@ -32,28 +60,28 @@
32
60
 
33
61
  @media (prefers-color-scheme: dark) {
34
62
  :root {
35
- --bg: #101012;
36
- --surface: #1c1c1e;
37
- --surface-raised: #242426;
38
- --surface-soft: #2c2c2e;
39
- --surface-hover: #303033;
40
- --dialog-surface: #1c1c1e;
41
- --text: #f5f5f7;
42
- --text-secondary: #c7c7cc;
43
- --text-tertiary: #98989d;
44
- --border: #353538;
45
- --border-strong: #4a4a4f;
46
- --accent: #64a8ff;
47
- --accent-hover: #82b8ff;
48
- --accent-soft: #17365d;
49
- --on-accent: #0c1b2c;
63
+ --bg: #111719;
64
+ --surface: #182022;
65
+ --surface-raised: #20292c;
66
+ --surface-soft: #283235;
67
+ --surface-hover: #303b3e;
68
+ --dialog-surface: #20292c;
69
+ --text: #edf2f1;
70
+ --text-secondary: #bec9c7;
71
+ --text-tertiary: #8e9b99;
72
+ --border: #334044;
73
+ --border-strong: #48585c;
74
+ --accent: #78b5ad;
75
+ --accent-hover: #91c8c1;
76
+ --accent-soft: #213b39;
77
+ --on-accent: #0d1e1b;
50
78
  --success: #62c596;
51
79
  --success-soft: #163a2a;
52
80
  --warning: #e7bc62;
53
81
  --warning-soft: #423414;
54
82
  --danger: #ff858a;
55
83
  --danger-soft: #4b2227;
56
- --shadow: 0 16px 40px rgb(0 0 0 / 28%);
84
+ --shadow: 0 2px 4px rgb(0 0 0 / 22%), 0 18px 46px rgb(0 0 0 / 32%);
57
85
  }
58
86
  }
59
87
 
@@ -63,7 +91,9 @@ html, body { min-height: 100%; }
63
91
 
64
92
  body {
65
93
  margin: 0;
66
- background: var(--bg);
94
+ background:
95
+ radial-gradient(circle at 78% -10%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 34rem),
96
+ var(--surface-canvas);
67
97
  color: var(--text);
68
98
  font-size: 14px;
69
99
  line-height: 1.5;
@@ -168,27 +198,30 @@ input:-webkit-autofill:focus {
168
198
 
169
199
  html,
170
200
  .mount-table,
201
+ .notes-tree,
202
+ .note-picker-results,
203
+ .notes-inline-viewer,
171
204
  .note-tree,
172
205
  .note-editor-scroll,
173
206
  .markdown-preview pre,
174
207
  .markdown-table-scroll,
175
- .candidate-comparison pre,
208
+ .diff-viewer,
176
209
  .dialog-body,
177
210
  .textarea {
178
211
  scrollbar-width: thin;
179
212
  scrollbar-color: var(--scrollbar-thumb) transparent;
180
213
  }
181
214
 
182
- :where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar {
215
+ :where(html, .mount-table, .notes-tree, .note-picker-results, .notes-inline-viewer, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar {
183
216
  width: 8px;
184
217
  height: 8px;
185
218
  }
186
219
 
187
- :where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar-track {
220
+ :where(html, .mount-table, .notes-tree, .note-picker-results, .notes-inline-viewer, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar-track {
188
221
  background: transparent;
189
222
  }
190
223
 
191
- :where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar-thumb {
224
+ :where(html, .mount-table, .notes-tree, .note-picker-results, .notes-inline-viewer, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar-thumb {
192
225
  min-width: 28px;
193
226
  min-height: 28px;
194
227
  border: 2px solid transparent;
@@ -197,7 +230,7 @@ html,
197
230
  background-clip: padding-box;
198
231
  }
199
232
 
200
- :where(html, .mount-table, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .candidate-comparison pre, .dialog-body, .textarea)::-webkit-scrollbar-thumb:hover {
233
+ :where(html, .mount-table, .notes-tree, .note-picker-results, .notes-inline-viewer, .note-tree, .note-editor-scroll, .markdown-preview pre, .markdown-table-scroll, .diff-viewer, .dialog-body, .textarea)::-webkit-scrollbar-thumb:hover {
201
234
  background: var(--scrollbar-thumb-hover);
202
235
  background-clip: padding-box;
203
236
  }
@@ -257,15 +290,16 @@ html,
257
290
  .input, .select, .textarea {
258
291
  box-sizing: border-box;
259
292
  width: 100%;
260
- border: 1px solid var(--border-strong);
261
- border-radius: 9px;
293
+ border: 1px solid var(--panel-border);
294
+ border-radius: var(--radius-control);
262
295
  padding: 9px 11px;
263
- background-color: var(--surface);
296
+ background-color: var(--material-control);
264
297
  color: var(--text);
265
- transition: border-color .15s ease, box-shadow .15s ease;
298
+ box-shadow: inset 0 1px 0 var(--surface-highlight);
299
+ transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
266
300
  }
267
301
 
268
- .input, .select { height: 40px; min-height: 40px; font: inherit; line-height: 20px; }
302
+ .input, .select { height: 38px; min-height: 38px; font: inherit; line-height: 20px; }
269
303
  .select {
270
304
  -webkit-appearance: none;
271
305
  appearance: none;
@@ -282,82 +316,95 @@ html,
282
316
  .select option { background: var(--dialog-surface); color: var(--text); }
283
317
  .textarea { min-height: 132px; resize: vertical; }
284
318
  .input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
285
- .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
319
+ .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 72%, var(--border)); background-color: var(--material-control-hover); }
320
+ .input:focus, .select:focus, .textarea:focus { border-color: color-mix(in srgb, var(--accent) 72%, var(--border)); background-color: var(--surface-raised); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 1px 0 var(--surface-highlight); }
286
321
 
287
322
  .login-error { min-height: 21px; margin: 10px 0 0; color: var(--danger); font-size: 13px; }
288
323
 
289
324
  .button {
290
- min-height: 40px;
291
- border: 1px solid var(--border-strong);
292
- border-radius: 9px;
293
- padding: 7px 13px;
294
- background: var(--surface);
325
+ min-height: 36px;
326
+ border: 1px solid var(--panel-border);
327
+ border-radius: var(--radius-control);
328
+ padding: 6px 12px;
329
+ background: var(--material-control);
295
330
  color: var(--text);
296
- font-weight: 600;
331
+ font-weight: 590;
297
332
  white-space: nowrap;
298
- transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease;
333
+ box-shadow: var(--shadow-control);
334
+ transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease, color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
299
335
  }
300
336
 
301
- .button:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--text-tertiary); }
302
- .button:active:not(:disabled) { transform: scale(.98); }
303
- .button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
304
- .button.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 22%, transparent); }
337
+ .button:hover:not(:disabled) { background: var(--material-control-hover); border-color: var(--border-strong); transform: translateY(-1px); }
338
+ .button:active:not(:disabled) { transform: translateY(0) scale(.985); }
339
+ .button.primary { border-color: color-mix(in srgb, var(--accent) 82%, var(--border)); background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-accent) 24%, transparent), 0 1px 3px color-mix(in srgb, var(--text) 16%, transparent); }
340
+ .button.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-accent) 26%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 14%, transparent); }
305
341
  .button.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
306
342
  .button.danger:hover:not(:disabled) { background: var(--danger-soft); }
307
- .button.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
308
- .button.small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
343
+ .button.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); box-shadow: none; }
344
+ .button.small { min-height: 30px; padding: 4px 9px; font-size: 12px; }
309
345
  .login-card .button { width: 100%; margin-top: 20px; }
310
346
  .login-card .field + .field { margin-top: 16px; }
311
347
 
312
- .app-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-width) 6px minmax(0, 1fr); }
348
+ .app-shell { width: 100%; height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-columns: var(--sidebar-width) 6px minmax(0, 1fr); align-items: start; overflow: hidden; background: transparent; }
313
349
 
314
350
  .sidebar {
315
351
  position: sticky;
316
352
  top: 0;
317
353
  height: 100vh;
318
354
  height: 100dvh;
355
+ align-self: start;
319
356
  display: flex;
320
357
  flex-direction: column;
321
- padding: 16px 12px 12px;
322
- border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
323
- background: color-mix(in srgb, var(--surface) 88%, var(--bg));
324
- }
325
-
326
- .brand { display: flex; align-items: center; min-height: 49px; padding: 2px 10px 13px; }
358
+ padding: 18px 13px 13px;
359
+ border-right: 1px solid var(--separator);
360
+ background: color-mix(in srgb, var(--surface) 82%, transparent);
361
+ box-shadow: inset -1px 0 0 color-mix(in srgb, var(--surface-raised) 52%, transparent), 10px 0 36px color-mix(in srgb, var(--text) 3%, transparent);
362
+ -webkit-backdrop-filter: blur(26px) saturate(106%);
363
+ backdrop-filter: blur(26px) saturate(106%);
364
+ }
365
+
366
+ .brand { display: flex; align-items: center; gap: 11px; min-height: 56px; margin-bottom: 8px; padding: 3px 8px 12px; border-bottom: 1px solid var(--separator); }
367
+ .brand-emblem { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--border-strong) 66%, transparent); border-radius: 11px; background: linear-gradient(145deg, var(--surface-raised), color-mix(in srgb, var(--surface-soft) 76%, transparent)); box-shadow: var(--shadow-control); color: var(--accent); }
368
+ .brand-emblem::before, .brand-emblem::after, .brand-emblem span { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 3px; }
369
+ .brand-emblem::before { width: 15px; height: 19px; transform: translate(-2px, -1px) rotate(-5deg); opacity: .42; }
370
+ .brand-emblem::after { width: 15px; height: 19px; background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised)); transform: translate(2px, 1px) rotate(3deg); }
371
+ .brand-emblem span { z-index: 1; width: 7px; height: 1px; border-width: 1px 0 0; transform: translate(3px, -4px); box-shadow: 0 4px 0 currentColor; opacity: .68; }
327
372
  .brand-copy { min-width: 0; }
328
- .brand strong { display: block; margin-top: 1px; font-size: 16px; line-height: 1.2; font-weight: 680; letter-spacing: -.02em; }
329
- .brand span { display: block; color: var(--text-tertiary); font-size: 9px; font-weight: 650; letter-spacing: .075em; text-transform: uppercase; }
373
+ .brand strong { display: block; margin-top: 2px; font-size: 16px; line-height: 1.2; font-weight: 690; letter-spacing: -.025em; }
374
+ .brand-copy > span { display: block; color: var(--text-tertiary); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
330
375
 
331
- .nav { display: grid; gap: 14px; }
376
+ .nav { min-height: 0; display: grid; align-content: start; flex: 1 1 auto; gap: 17px; overflow-y: auto; overscroll-behavior: contain; }
332
377
  .nav-group { display: grid; gap: 2px; }
333
- .nav-group + .nav-group { border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); padding-top: 10px; }
334
- .nav-group-label { padding: 0 10px 4px; color: var(--text-tertiary); font-size: 10px; font-weight: 600; letter-spacing: .025em; }
378
+ .nav-group + .nav-group { padding-top: 1px; }
379
+ .nav-group-label { padding: 0 9px 5px; color: var(--text-tertiary); font-size: 9px; font-weight: 680; letter-spacing: .07em; }
335
380
  .nav-button {
336
381
  position: relative;
337
382
  width: 100%;
338
- min-height: 34px;
383
+ min-height: 38px;
339
384
  display: flex;
340
385
  align-items: center;
341
386
  gap: 8px;
342
387
  border: 0;
343
- border-radius: 8px;
344
- padding: 6px 10px;
388
+ border-radius: 10px;
389
+ padding: 7px 9px;
345
390
  background: transparent;
346
391
  color: var(--text-secondary);
347
392
  text-align: left;
348
393
  font-size: 13px;
349
394
  font-weight: 520;
350
- transition: background .14s ease, color .14s ease;
351
- }
352
- .nav-button:hover { background: var(--surface-hover); color: var(--text); }
353
- .nav-button:active { transform: translateY(1px); }
354
- .nav-button[aria-current="page"] { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); font-weight: 640; }
355
- .nav-button[aria-current="page"]::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; border-radius: 2px; background: var(--accent); }
395
+ transition: background var(--motion-base) ease, color var(--motion-fast) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--ease-out);
396
+ }
397
+ .nav-button:hover { background: color-mix(in srgb, var(--surface-hover) 64%, transparent); color: var(--text); transform: translateX(2px); }
398
+ .nav-button:active { transform: translateX(2px) scale(.99); }
399
+ .nav-button[aria-current="page"] { background: color-mix(in srgb, var(--surface-raised) 78%, transparent); color: var(--text); font-weight: 640; box-shadow: inset 0 1px 0 var(--surface-highlight), 0 5px 15px color-mix(in srgb, var(--text) 5%, transparent); }
400
+ .nav-button[aria-current="page"]::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -1px; width: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 28%, transparent); }
401
+ .nav-index { width: 18px; flex: none; color: color-mix(in srgb, var(--text-tertiary) 70%, transparent); font: 8px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; transition: color var(--motion-fast) ease; }
402
+ .nav-button:hover .nav-index, .nav-button[aria-current="page"] .nav-index { color: var(--accent); }
356
403
  .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
357
- .nav-count { margin-left: auto; min-width: 21px; border-radius: 6px; padding: 1px 6px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
358
- .nav-button[aria-current="page"] .nav-count { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
404
+ .nav-count { margin-left: auto; min-width: 21px; border-radius: 6px; padding: 1px 6px; background: color-mix(in srgb, var(--surface-soft) 68%, transparent); color: var(--text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
405
+ .nav-button[aria-current="page"] .nav-count { background: var(--accent-soft); color: var(--accent); }
359
406
 
360
- .sidebar-footer { margin-top: auto; display: grid; gap: 7px; border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); padding: 10px 10px 0; }
407
+ .sidebar-footer { margin-top: auto; display: grid; gap: 7px; border: 1px solid color-mix(in srgb, var(--border) 62%, transparent); border-radius: 11px; padding: 8px 10px; background: color-mix(in srgb, var(--surface-raised) 34%, transparent); }
361
408
  .connection { display: flex; align-items: center; gap: 7px; min-height: 25px; color: var(--text-tertiary); font-size: 10px; }
362
409
  .status-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 12%, transparent); }
363
410
  .sidebar-footer .button { justify-self: start; }
@@ -370,6 +417,7 @@ html,
370
417
  min-width: 6px;
371
418
  height: 100vh;
372
419
  height: 100dvh;
420
+ align-self: start;
373
421
  cursor: col-resize;
374
422
  touch-action: none;
375
423
  background: transparent;
@@ -405,24 +453,30 @@ html,
405
453
  .app-sidebar-resizer.is-dragging span { opacity: 1; background: var(--accent); }
406
454
  .app-sidebar-resizer:hover,
407
455
  .app-sidebar-resizer.is-dragging { background: color-mix(in srgb, var(--accent) 8%, transparent); }
408
- .main { min-width: 0; grid-column: 3; }
456
+ .main { min-width: 0; width: 100%; height: 100vh; height: 100dvh; grid-column: 3; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
409
457
  .topbar {
410
458
  position: sticky;
411
459
  top: 0;
412
460
  z-index: 10;
413
- min-height: 76px;
461
+ min-height: 78px;
414
462
  display: flex;
415
463
  align-items: center;
416
464
  justify-content: space-between;
417
465
  gap: 18px;
418
- border-bottom: 1px solid var(--border);
466
+ border-bottom: 1px solid var(--separator);
419
467
  padding: 14px clamp(18px, 3vw, 38px);
420
- background: color-mix(in srgb, var(--bg) 89%, transparent);
421
- backdrop-filter: blur(18px);
468
+ background: color-mix(in srgb, var(--surface-canvas) 86%, transparent);
469
+ box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--surface-raised) 46%, transparent);
470
+ -webkit-backdrop-filter: blur(22px) saturate(104%);
471
+ backdrop-filter: blur(22px) saturate(104%);
422
472
  }
423
473
  .topbar h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
424
- .topbar p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; text-wrap: pretty; }
474
+ .topbar p { margin: 3px 0 0; color: var(--text-tertiary); font-size: 11px; text-wrap: pretty; }
425
475
  .topbar-title { display: flex; align-items: center; gap: 12px; }
476
+ .topbar-heading { min-width: 0; }
477
+ .topbar-kicker { display: block; margin-bottom: 2px; color: color-mix(in srgb, var(--accent) 72%, var(--text-tertiary)); font: 8px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; letter-spacing: .12em; }
478
+ .route-progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--accent) 7%, transparent); }
479
+ .route-progress span { display: block; width: calc(var(--route-progress) * 100%); height: 100%; border-radius: 0 99px 99px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 58%, transparent), var(--accent)); transition: width var(--motion-slow) var(--ease-out); }
426
480
  .mobile-menu { display: none; }
427
481
  .topbar-actions { display: flex; align-items: center; gap: 8px; }
428
482
  .pane-toggle-group {
@@ -493,7 +547,8 @@ html,
493
547
  opacity: .18;
494
548
  }
495
549
 
496
- .page { width: min(100%, 1440px); margin: 0 auto; padding: 28px clamp(18px, 3vw, 38px) 64px; }
550
+ .page { width: min(100%, 1440px); margin: 0 auto; padding: 30px clamp(20px, 3vw, 42px) 64px; }
551
+ .view-stage { min-width: 0; min-height: 100%; }
497
552
  .app-shell[data-view="entries"] .topbar { min-height: 68px; padding-block: 11px; }
498
553
  .app-shell[data-view="entries"] .topbar h1 { font-size: 19px; }
499
554
  .app-shell[data-view="entries"] .page {
@@ -505,20 +560,35 @@ html,
505
560
  height: calc(100dvh - 148px);
506
561
  min-height: 520px;
507
562
  }
563
+ .app-shell[data-view="notes"] .topbar { min-height: 64px; padding-block: 9px; }
564
+ .app-shell[data-view="notes"] .topbar h1 { font-size: 18px; }
565
+ .app-shell[data-view="notes"] .topbar p { display: none; }
566
+ .app-shell[data-view="notes"] .page {
567
+ width: 100%;
568
+ max-width: none;
569
+ height: calc(100dvh - 64px);
570
+ margin: 0;
571
+ overflow: hidden;
572
+ padding: 0;
573
+ }
574
+ .app-shell[data-view="notes"] .view-stage { height: 100%; min-height: 0; overflow: hidden; }
508
575
 
509
576
  .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
510
577
  .section-heading h2 { margin: 0; font-size: 16px; }
511
578
  .section-heading p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
512
579
 
513
580
  .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
514
- .metric { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--surface); }
581
+ .metric { position: relative; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--panel-border) 76%, transparent); border-radius: var(--radius-panel); padding: 18px; background: var(--surface-pane); box-shadow: var(--shadow-control); transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--ease-out); }
582
+ .metric::after { content: ""; position: absolute; inset: auto 18px 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 32%, transparent), transparent); opacity: 0; transition: opacity var(--motion-base) ease; }
583
+ .metric:hover { border-color: color-mix(in srgb, var(--accent) 20%, var(--panel-border)); box-shadow: var(--shadow-panel); transform: translateY(-2px); }
584
+ .metric:hover::after { opacity: 1; }
515
585
  .metric-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
516
586
  .metric-value { display: block; margin-top: 8px; font-size: 27px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
517
587
  .metric-detail { margin-top: 7px; color: var(--text-tertiary); font-size: 11px; }
518
588
 
519
589
  .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); gap: 18px; }
520
- .panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
521
- .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 15px 17px; }
590
+ .panel { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--panel-border) 80%, transparent); border-radius: var(--radius-panel); background: var(--surface-pane); box-shadow: var(--shadow-control); }
591
+ .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--separator); padding: 15px 17px; }
522
592
  .panel-header h2, .panel-header h3 { margin: 0; font-size: 14px; }
523
593
  .panel-body { padding: 8px; }
524
594
 
@@ -533,10 +603,11 @@ html,
533
603
  grid-template-columns: auto minmax(0, 1fr) auto;
534
604
  align-items: center;
535
605
  gap: 12px 16px;
536
- border: 1px solid var(--border);
606
+ border: 1px solid var(--panel-border);
537
607
  border-radius: 14px;
538
608
  padding: 12px 14px;
539
- background: var(--surface);
609
+ background: var(--material-panel);
610
+ box-shadow: var(--shadow-soft);
540
611
  }
541
612
  .library-detail-back { align-self: center; gap: 7px; }
542
613
  .library-detail-back::before {
@@ -571,9 +642,10 @@ html,
571
642
  display: grid;
572
643
  grid-template-columns: minmax(210px, .85fr) minmax(240px, 1.25fr) minmax(170px, .7fr) 244px;
573
644
  overflow: hidden;
574
- border: 1px solid var(--border);
645
+ border: 1px solid var(--panel-border);
575
646
  border-radius: var(--radius);
576
- background: var(--surface);
647
+ background: var(--material-panel);
648
+ box-shadow: var(--shadow-soft);
577
649
  }
578
650
  .base-card {
579
651
  min-width: 0;
@@ -583,13 +655,15 @@ html,
583
655
  grid-template-rows: auto auto;
584
656
  align-items: center;
585
657
  gap: 8px 22px;
586
- border-bottom: 1px solid var(--border);
658
+ border-bottom: 1px solid var(--separator);
587
659
  padding: 16px 18px;
588
- background: var(--surface);
660
+ background: transparent;
589
661
  transition: background .18s ease;
662
+ content-visibility: auto;
663
+ contain-intrinsic-size: auto 94px;
590
664
  }
591
665
  .base-card:last-child { border-bottom: 0; }
592
- .base-card:hover { background: var(--surface-hover); }
666
+ .base-card:hover { background: color-mix(in srgb, var(--surface-hover) 64%, transparent); }
593
667
  .base-card.is-archived { opacity: .78; }
594
668
  .base-card-header { min-width: 0; grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
595
669
  .base-card-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
@@ -615,8 +689,8 @@ html,
615
689
  .context-pill strong { color: var(--text-secondary); }
616
690
  .context-pill span { overflow: hidden; color: var(--text-tertiary); text-overflow: ellipsis; white-space: nowrap; }
617
691
  .context-warning { border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border)); border-radius: 10px; padding: 11px 13px; background: var(--warning-soft); color: var(--warning); font-size: 12px; }
618
- .mount-manager { overflow: clip; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
619
- .mount-manager-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding: 12px; }
692
+ .mount-manager { overflow: clip; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--material-panel); box-shadow: var(--shadow-soft); }
693
+ .mount-manager-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 1px solid var(--separator); padding: 12px; }
620
694
  .mount-search { min-width: 220px; }
621
695
  .mount-manager-toolbar > .select { width: auto; min-width: 130px; }
622
696
  .mount-target-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--border); padding: 9px 14px; background: var(--surface-soft); color: var(--text-secondary); font-size: 12px; }
@@ -655,12 +729,23 @@ html,
655
729
  display: grid;
656
730
  grid-template-columns: clamp(240px, 24vw, 320px) minmax(0, 1fr);
657
731
  overflow: hidden;
658
- border: 1px solid var(--border);
659
- border-radius: 14px;
660
- background: var(--surface);
661
- box-shadow: 0 14px 38px color-mix(in srgb, var(--text) 5%, transparent);
732
+ border: 1px solid color-mix(in srgb, var(--panel-border) 84%, transparent);
733
+ border-radius: var(--radius-shell);
734
+ background: var(--surface-editor);
735
+ box-shadow: var(--shadow-panel), inset 0 1px 0 var(--surface-highlight);
736
+ }
737
+ .note-tree-panel {
738
+ min-width: 0;
739
+ min-height: 0;
740
+ height: 100%;
741
+ display: grid;
742
+ grid-template-rows: auto auto minmax(0, 1fr) auto;
743
+ overflow: hidden;
744
+ border-right: 1px solid var(--separator);
745
+ background: color-mix(in srgb, var(--surface-pane) 90%, transparent);
746
+ -webkit-backdrop-filter: blur(18px) saturate(104%);
747
+ backdrop-filter: blur(18px) saturate(104%);
662
748
  }
663
- .note-tree-panel { min-width: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface)); }
664
749
  .note-tree-scrim { display: none; }
665
750
  .note-tree-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px 8px 16px; }
666
751
  .note-tree-header h2 { margin: 0; font-size: 14px; letter-spacing: -.01em; }
@@ -668,13 +753,19 @@ html,
668
753
  .note-add-button { width: 30px; min-width: 30px; min-height: 30px; padding: 0; font-size: 18px; font-weight: 400; }
669
754
  .note-tree-search-wrap { position: relative; padding: 5px 10px 9px; }
670
755
  .note-tree-search-wrap .search-symbol { left: 20px; }
671
- .note-tree-search { width: 100%; height: 34px; border: 1px solid transparent; border-radius: 8px; padding: 6px 10px 6px 34px; background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--text); outline: none; }
672
- .note-tree-search:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface); }
673
- .note-tree { min-height: 0; overflow: auto; padding: 3px 8px 12px; }
756
+ .note-tree-search { width: 100%; height: 34px; border: 1px solid var(--separator); border-radius: var(--radius-control); padding: 6px 10px 6px 34px; background: var(--material-control); color: var(--text); outline: none; box-shadow: inset 0 1px 0 var(--surface-highlight); }
757
+ .note-tree-search:focus { border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); background: var(--surface-raised); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
758
+ .note-tree {
759
+ min-height: 0;
760
+ overflow-x: hidden;
761
+ overflow-y: auto;
762
+ overscroll-behavior: contain;
763
+ padding: 3px 8px 12px;
764
+ }
674
765
  .note-tree-group + .note-tree-group { margin-top: 3px; }
675
766
  .note-tree-base, .note-tree-document, .note-tree-new { width: 100%; display: flex; align-items: center; border: 0; background: transparent; color: var(--text-secondary); text-align: left; }
676
- .note-tree-base { min-height: 34px; gap: 7px; border-radius: 7px; padding: 5px 7px; font-weight: 620; }
677
- .note-tree-base:hover, .note-tree-document:hover, .note-tree-new:hover { background: var(--surface-hover); color: var(--text); }
767
+ .note-tree-base { min-height: 36px; gap: 7px; border-radius: 9px; padding: 5px 7px; font-weight: 620; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-base) var(--ease-out); }
768
+ .note-tree-base:hover, .note-tree-document:hover, .note-tree-new:hover { background: color-mix(in srgb, var(--surface-hover) 66%, transparent); color: var(--text); transform: translateX(2px); }
678
769
  .tree-disclosure { width: 7px; height: 7px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .16s ease; }
679
770
  .note-tree-group[data-expanded="true"] .tree-disclosure { transform: rotate(45deg) translate(-1px, -1px); }
680
771
  .tree-folder-icon {
@@ -692,8 +783,8 @@ html,
692
783
  .tree-base-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
693
784
  .tree-count { min-width: 20px; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
694
785
  .note-tree-documents { display: grid; gap: 1px; margin: 1px 0 5px 18px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--border-strong) 55%, transparent); }
695
- .note-tree-document { position: relative; min-height: 38px; gap: 8px; border-radius: 7px; padding: 5px 8px; }
696
- .note-tree-document[aria-current="page"] { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--text); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 72%, transparent); }
786
+ .note-tree-document { position: relative; min-height: 40px; gap: 8px; border-radius: 9px; padding: 5px 8px; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) ease; }
787
+ .note-tree-document[aria-current="page"] { background: color-mix(in srgb, var(--surface-raised) 82%, transparent); color: var(--text); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 74%, transparent), 0 5px 14px color-mix(in srgb, var(--text) 5%, transparent); transform: translateX(2px); }
697
788
  .tree-document-icon {
698
789
  width: 14px;
699
790
  height: 17px;
@@ -710,16 +801,217 @@ html,
710
801
  .note-tree-document > .badge { min-height: 17px; padding: 1px 5px; font-size: 8px; }
711
802
  .tree-document-copy strong, .tree-document-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
712
803
  .tree-document-copy strong { font-size: 12px; font-weight: 540; }
713
- .tree-document-copy small { margin-top: 1px; color: var(--text-tertiary); font-size: 9px; }
804
+ .tree-document-copy small { margin-top: 1px; color: var(--text-tertiary); font-size: 10px; }
714
805
  .note-tree-new { min-height: 30px; gap: 7px; border-radius: 7px; padding: 4px 8px; color: var(--text-tertiary); font-size: 11px; }
806
+ .note-tree-status { display: grid; gap: 7px; padding: 10px 9px; color: var(--text-tertiary); font-size: 10px; line-height: 1.45; }
807
+ .note-tree-status.is-error { color: var(--danger); }
808
+ .note-tree-status .button { justify-self: start; }
809
+ .note-tree-more { width: 100%; min-height: 30px; border: 0; border-radius: 7px; padding: 5px 8px; background: transparent; color: var(--text-tertiary); font: inherit; font-size: 10px; text-align: left; transition: background .15s ease, color .15s ease; }
810
+ .note-tree-more:hover:not(:disabled) { background: var(--surface-hover); color: var(--accent); }
811
+ .note-tree-more.search-more { margin: 4px 7px 10px; width: calc(100% - 14px); text-align: center; }
715
812
  .note-tree-footer { border-top: 1px solid var(--border); padding: 8px 11px; }
716
813
  .note-tree-empty { padding: 28px 12px; color: var(--text-tertiary); font-size: 12px; text-align: center; }
814
+
815
+ .notes-page { min-width: 0; height: 100%; }
816
+ .notes-workspace {
817
+ position: relative;
818
+ min-width: 0;
819
+ height: 100%;
820
+ display: grid;
821
+ grid-template-columns: clamp(250px, 25%, 320px) minmax(0, 1fr);
822
+ overflow: hidden;
823
+ background: var(--surface-editor);
824
+ }
825
+ .notes-browser { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; border-right: 1px solid var(--separator); background: color-mix(in srgb, var(--surface-pane) 90%, transparent); -webkit-backdrop-filter: blur(18px) saturate(104%); backdrop-filter: blur(18px) saturate(104%); }
826
+ .notes-browser-header { min-height: 68px; display: grid; gap: 8px; padding: 10px 10px 7px; }
827
+ .notes-browser-header > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
828
+ .notes-browser-header h2 { margin: 0; font-size: 13px; font-weight: 650; }
829
+ .notes-browser-header span { color: var(--text-tertiary); font-size: 10px; }
830
+ .notes-browser-actions { display: flex; align-items: center; gap: 4px; }
831
+ .notes-search { padding: 1px 10px 7px; }
832
+ .notes-search .input { width: 100%; height: 34px; }
833
+ .notes-tree { min-width: 0; max-width: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 2px 5px 16px; }
834
+ .notes-tree-branch { min-width: 0; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
835
+ .notes-tree-branch[role="group"] { position: relative; margin-left: 17px; padding-left: 5px; }
836
+ .notes-tree-branch[role="group"]::before { content: ""; position: absolute; top: 0; bottom: 5px; left: 0; width: 1px; background: color-mix(in srgb, var(--border-strong) 48%, transparent); }
837
+ .notes-tree-node { min-width: 0; max-width: 100%; }
838
+ .notes-tree-item { --notes-row-actions-width: 118px; position: relative; width: 100%; max-width: 100%; min-width: 0; display: flex; align-items: center; border-radius: 8px; transition: background var(--motion-fast) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--ease-out); }
839
+ .notes-tree-item:hover { background: color-mix(in srgb, var(--surface-hover) 70%, transparent); }
840
+ .notes-tree-item[data-selected="true"] { background: color-mix(in srgb, var(--surface-raised) 82%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 70%, transparent), 0 5px 14px color-mix(in srgb, var(--text) 5%, transparent); transform: translateX(2px); }
841
+ .notes-tree-item[data-drop-target="true"] { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); outline: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: -1px; }
842
+ .notes-tree-item[data-drop-target="true"]::after { content: "放入此目录"; position: absolute; right: 6px; z-index: 2; border-radius: 4px; padding: 2px 5px; background: color-mix(in srgb, var(--surface-raised) 92%, transparent); color: var(--accent); font-size: 8px; font-weight: 620; pointer-events: none; }
843
+ .notes-tree-item[data-drop-target="true"] .notes-row-actions { opacity: 0; pointer-events: none; }
844
+ .notes-tree-item[data-dragging="true"] { opacity: .45; }
845
+ .notes-tree-row { width: 100%; min-width: 0; min-height: 34px; display: flex; align-items: center; flex: 1 1 0; gap: 7px; overflow: hidden; border: 0; padding: 3px 4px; background: transparent; color: var(--text-secondary); font: inherit; text-align: left; transition: padding-right .12s ease; }
846
+ .notes-tree-row:hover, .notes-tree-row[aria-selected="true"] { color: var(--text); }
847
+ .notes-tree-chevron, .notes-tree-spacer { position: relative; width: 14px; height: 20px; flex: none; color: var(--text-tertiary); }
848
+ .notes-tree-chevron::before { content: ""; position: absolute; top: 50%; left: 3px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-50%) rotate(-45deg); transform-origin: center; transition: transform .16s cubic-bezier(.2, .8, .2, 1), color .14s ease; }
849
+ .notes-tree-row[aria-expanded="true"] .notes-tree-chevron::before { transform: translateY(-65%) rotate(45deg); color: var(--accent); }
850
+ .notes-tree-name { min-width: 0; max-width: 100%; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
851
+ .notes-row-actions { position: absolute; z-index: 1; right: 3px; width: var(--notes-row-actions-width); display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding-left: 14px; background: linear-gradient(90deg, transparent, var(--surface-hover) 14px); opacity: 0; pointer-events: none; transition: opacity .12s ease; }
852
+ .notes-tree-item:hover .notes-tree-row, .notes-tree-item:focus-within .notes-tree-row { padding-right: calc(var(--notes-row-actions-width) + 7px); }
853
+ .notes-tree-item:hover .notes-row-actions, .notes-tree-item:focus-within .notes-row-actions { opacity: 1; pointer-events: auto; }
854
+ .button.tiny { min-height: 26px; padding: 3px 6px; border-radius: var(--radius-small); font-size: 10px; }
855
+ .danger-text { color: var(--danger); }
856
+ .notes-tree-loading { margin-left: 24px; padding: 7px 10px; color: var(--text-tertiary); font-size: 10px; }
857
+ .notes-tree-empty, .notes-folder-empty { display: grid; place-content: center; justify-items: center; gap: 5px; color: var(--text-tertiary); text-align: center; }
858
+ .notes-tree-empty { min-height: 170px; padding: 24px 12px; }
859
+ .notes-tree-empty strong { color: var(--text-secondary); font-size: 12px; }
860
+ .notes-search-results { display: grid; gap: 2px; }
861
+ .notes-search-row { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; border: 0; border-radius: 7px; padding: 7px 8px; background: transparent; color: var(--text); text-align: left; }
862
+ .notes-search-row:hover { background: var(--surface-hover); }
863
+ .notes-search-row strong, .notes-search-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
864
+ .notes-search-row strong { font-size: 11px; }
865
+ .notes-search-row small { margin-top: 1px; color: var(--text-tertiary); font-size: 10px; }
866
+ .note-node-icon { position: relative; width: 18px; height: 21px; display: grid; place-items: end center; flex: none; border: 1px solid var(--border-strong); border-radius: 3px; padding-bottom: 2px; background: var(--surface-raised); color: var(--text-tertiary); font-size: 5px; font-weight: 720; letter-spacing: .02em; }
867
+ .note-node-icon.is-folder { width: 20px; height: 15px; margin-top: 2px; border-radius: 3px; background: color-mix(in srgb, var(--text-tertiary) 11%, var(--surface-raised)); }
868
+ .note-node-icon.is-folder::before { content: ""; position: absolute; top: -4px; left: 1px; width: 9px; height: 4px; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 3px 3px 0 0; background: inherit; }
869
+ .note-node-icon.is-document, .note-node-icon[data-media-kind="text"] { border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong)); color: var(--accent); }
870
+ .note-node-icon.is-large { width: 38px; height: 46px; border-radius: 6px; padding-bottom: 5px; font-size: 7px; }
871
+ .note-node-icon.is-folder.is-large { width: 44px; height: 32px; }
872
+ .notes-content { min-width: 0; min-height: 0; overflow: auto; background: var(--surface-editor); }
873
+ .notes-content-header { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--separator); padding: 11px 22px 13px; background: var(--material-toolbar); -webkit-backdrop-filter: blur(16px) saturate(108%); backdrop-filter: blur(16px) saturate(108%); }
874
+ .notes-breadcrumb { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; color: var(--text-tertiary); font-size: 10px; }
875
+ .notes-breadcrumb span { min-width: 0; display: flex; align-items: center; gap: 5px; }
876
+ .notes-breadcrumb button { min-width: 0; overflow: hidden; border: 0; padding: 2px; background: transparent; color: inherit; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
877
+ .notes-breadcrumb button:hover { color: var(--accent); }
878
+ .notes-breadcrumb strong { overflow: hidden; color: var(--text-secondary); font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
879
+ .notes-content-title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 10px; }
880
+ .notes-content-title h2 { margin: 0; font-size: 18px; letter-spacing: -.015em; }
881
+ .notes-content-title p { margin: 3px 0 0; color: var(--text-tertiary); font-size: 10px; }
882
+ .notes-content-actions { display: flex; gap: 7px; }
883
+ .notes-file-list { min-width: 620px; padding: 6px 12px 28px; }
884
+ .notes-file-row { min-height: 46px; display: grid; grid-template-columns: minmax(230px, 1fr) 130px 72px auto; align-items: center; gap: 12px; border-radius: 6px; padding: 3px 8px; transition: background .14s ease; }
885
+ .notes-file-row:hover { background: var(--surface-hover); }
886
+ .notes-file-main { min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; padding: 3px; background: transparent; color: var(--text); text-align: left; }
887
+ .notes-file-main > span:last-child { min-width: 0; }
888
+ .notes-file-main strong, .notes-file-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
889
+ .notes-file-main strong { font-size: 12px; font-weight: 560; }
890
+ .notes-file-main small, .notes-file-row time, .notes-file-size { color: var(--text-tertiary); font-size: 10px; }
891
+ .notes-file-actions { display: flex; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
892
+ .notes-file-row:hover .notes-file-actions, .notes-file-row:focus-within .notes-file-actions { opacity: 1; pointer-events: auto; }
893
+ .notes-folder-empty { min-height: 360px; padding: 32px; }
894
+ .notes-folder-empty h3 { margin: 9px 0 0; color: var(--text); font-size: 16px; }
895
+ .notes-folder-empty p { max-width: 380px; margin: 0 0 12px; }
896
+ .notes-folder-empty > div { display: flex; gap: 8px; }
897
+ .notes-empty-folder-mark { position: relative; width: 58px; height: 40px; border: 1.5px solid var(--border-strong); border-radius: 7px; background: var(--surface-soft); }
898
+ .notes-empty-folder-mark::before { content: ""; position: absolute; top: -8px; left: 4px; width: 24px; height: 8px; border: 1.5px solid var(--border-strong); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--surface-soft); }
899
+ .notes-content.is-document { --notes-document-inline: clamp(24px, 4.5vw, 76px); display: block; background: var(--surface-editor); }
900
+ .notes-content.is-document.has-line-numbers { --notes-document-inline: clamp(34px, 3.2vw, 48px); }
901
+ .notes-document-toolbar { position: sticky; top: 0; z-index: 2; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--separator); padding: 5px 14px 5px 20px; background: var(--material-toolbar); -webkit-backdrop-filter: blur(16px) saturate(108%); backdrop-filter: blur(16px) saturate(108%); }
902
+ .notes-toolbar-leading { min-width: 0; display: flex; align-items: center; gap: 16px; overflow: hidden; }
903
+ .notes-file-info { min-width: 0; display: flex; align-items: center; gap: 5px 12px; overflow: hidden; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
904
+ .notes-file-info-item { min-width: 0; display: inline-flex; align-items: baseline; gap: 4px; }
905
+ .notes-file-info-item strong { color: var(--text-secondary); font-size: 10px; font-weight: 590; }
906
+ .notes-file-info-item > span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
907
+ .notes-document-actions { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 5px; }
908
+ .notes-save-state { color: var(--text-tertiary); font-size: 10px; }
909
+ .notes-save-state[data-dirty="true"] { color: var(--warning); }
910
+ .notes-document-title { min-width: 0; margin: 0; padding: clamp(26px, 4vw, 48px) var(--notes-document-inline) 0; outline: 0; color: var(--text); font-family: var(--font-reading); font-size: clamp(25px, 2.5vw, 32px); font-weight: 700; line-height: 1.22; letter-spacing: -.025em; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; caret-color: var(--accent); }
911
+ .notes-document-title:focus, .notes-document-title:focus-visible { outline: 0; box-shadow: none; }
912
+ .notes-content.is-document > .notes-live-editor, .notes-content.is-document > .notes-plain-editor { width: 100%; min-width: 0; min-height: max(520px, calc(100% - 116px)); margin-top: 0; padding: 16px var(--notes-document-inline) 72px; }
913
+ .notes-content.is-document, .note-paper { font-family: var(--font-reading); }
914
+ .notes-live-editor { width: 100%; min-height: 520px; color: color-mix(in srgb, var(--text) 82%, var(--text-secondary)); font-family: var(--font-reading); }
915
+ .notes-plain-editor { max-width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); cursor: text; }
916
+ .notes-plain-editor-surface { width: 100%; min-height: inherit; counter-reset: note-line; border: 0; outline: 0; background: transparent; box-shadow: none; color: color-mix(in srgb, var(--text) 82%, var(--text-secondary)); font: 16px/1.55 var(--font-reading); letter-spacing: normal; caret-color: var(--accent); cursor: text; }
917
+ .notes-plain-editor-surface:focus, .notes-plain-editor-surface:focus-visible { border: 0; outline: 0; box-shadow: none; }
918
+ .notes-plain-editor-surface > p { position: relative; min-height: 1.78em; margin: 0; counter-increment: note-line; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
919
+ .notes-plain-editor-surface > p::before { content: counter(note-line); position: absolute; right: calc(100% + 8px); top: 0; width: 22px; color: color-mix(in srgb, var(--text-tertiary) 54%, transparent); font: 11px/2.25 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; pointer-events: none; user-select: none; }
920
+ .notes-plain-editor-surface ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
921
+ .notes-live-editor-surface { width: 100%; min-width: 0; max-width: 100%; min-height: 520px; border: 0; outline: 0; background: transparent; color: color-mix(in srgb, var(--text) 82%, var(--text-secondary)); font: 16px/1.55 var(--font-reading); letter-spacing: normal; overflow-wrap: anywhere; word-break: break-word; caret-color: var(--accent); }
922
+ .notes-live-editor-surface:focus, .notes-live-editor-surface:focus-visible { border: 0; outline: 0; box-shadow: none; }
923
+ .notes-live-editor-surface > :first-child { margin-top: 0; }
924
+ .notes-live-editor-surface > :last-child { margin-bottom: 0; }
925
+ .notes-live-editor-surface p { margin: .62em 0; line-height: 1.55; }
926
+ .notes-live-editor-surface h1, .notes-live-editor-surface h2, .notes-live-editor-surface h3, .notes-live-editor-surface h4 { margin: 1.35em 0 .48em; color: var(--text); line-height: 1.28; letter-spacing: -.018em; }
927
+ .notes-live-editor-surface h1 { font-size: 1.75em; }
928
+ .notes-live-editor-surface h2 { font-size: 1.4em; }
929
+ .notes-live-editor-surface h3 { font-size: 1.16em; }
930
+ .notes-live-editor-surface ul, .notes-live-editor-surface ol { margin: .65em 0; padding-left: 1.55em; }
931
+ .notes-live-editor-surface li { margin: .16em 0; line-height: 1.55; }
932
+ .notes-live-editor-surface blockquote { margin: 1.1em 0; border-left: 3px solid color-mix(in srgb, var(--accent) 42%, var(--border)); padding: .1em 0 .1em 1em; color: var(--text-tertiary); }
933
+ .notes-live-editor-surface code { border-radius: 4px; padding: .12em .36em; background: var(--surface-soft); color: var(--text); font: .9em/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace; }
934
+ .notes-live-editor-surface pre { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; background: var(--surface-soft); }
935
+ .notes-live-editor-surface pre code { padding: 0; background: transparent; }
936
+ .notes-live-editor-surface a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
937
+ .notes-live-editor-surface hr { border: 0; border-top: 1px solid var(--border); margin: 1.8em 0; }
938
+ .notes-live-editor-surface img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; border-radius: 7px; }
939
+ .notes-live-editor-surface table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .94em; }
940
+ .notes-live-editor-surface th, .notes-live-editor-surface td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
941
+ .notes-live-editor-surface th { background: var(--surface-soft); color: var(--text); font-weight: 620; }
942
+ .notes-live-editor-surface ul[data-type="taskList"] { list-style: none; padding-left: 0; }
943
+ .notes-live-editor-surface ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 8px; }
944
+ .notes-live-editor-surface ul[data-type="taskList"] label { margin-top: 3px; }
945
+ .notes-live-editor-surface ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
946
+ .notes-editor-loading, .notes-editor-error { min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--text-tertiary); font-size: 12px; }
947
+ .notes-editor-loading::before { content: ""; width: 36px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: note-editor-loading 1.1s ease-in-out infinite; }
948
+ .notes-editor-error strong { color: var(--text); font-size: 13px; }
949
+ @keyframes note-editor-loading { 0%, 100% { opacity: .25; transform: scaleX(.72); } 50% { opacity: .75; transform: scaleX(1); } }
950
+ @media (prefers-reduced-motion: reduce) { .notes-editor-loading::before { animation: none; opacity: .55; } }
951
+ .notes-inline-viewer { min-height: calc(100% - 62px); display: grid; place-items: center; overflow: auto; padding: clamp(18px, 3vw, 36px); background: color-mix(in srgb, var(--surface-soft) 35%, var(--surface)); }
952
+ .notes-inline-viewer.is-pdf { padding: 0; background: var(--surface-soft); }
953
+ .notes-inline-image { display: block; max-width: 100%; max-height: calc(100dvh - 190px); object-fit: contain; border-radius: 6px; box-shadow: 0 10px 32px color-mix(in srgb, var(--text) 9%, transparent); }
954
+ .notes-inline-frame { width: 100%; height: max(620px, calc(100dvh - 130px)); border: 0; background: var(--surface); }
955
+ .notes-inline-unavailable { max-width: 440px; display: grid; justify-items: center; gap: 9px; padding: 40px 24px; color: var(--text-tertiary); text-align: center; }
956
+ .notes-inline-unavailable h2 { overflow-wrap: anywhere; margin: 8px 0 0; color: var(--text); font-size: 18px; }
957
+ .notes-inline-unavailable p { margin: 0 0 8px; line-height: 1.6; }
958
+ .notes-drop-overlay { position: absolute; inset: 12px; z-index: 5; display: grid; place-content: center; justify-items: center; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--surface-raised) 94%, transparent); opacity: 0; transform: scale(.985); pointer-events: none; transition: opacity .14s ease, transform .14s ease; }
959
+ .notes-drop-overlay strong { font-size: 16px; }
960
+ .notes-drop-overlay span { margin-top: 5px; color: var(--text-tertiary); font-size: 12px; }
961
+ .notes-workspace[data-drop-active="true"] .notes-drop-overlay { opacity: 1; transform: scale(1); }
962
+ .notes-transfer {
963
+ --notes-transfer-progress: 0;
964
+ position: absolute;
965
+ right: 18px;
966
+ bottom: 18px;
967
+ z-index: 6;
968
+ width: min(370px, calc(100% - 36px));
969
+ display: grid;
970
+ gap: 8px;
971
+ border: 1px solid color-mix(in srgb, var(--border-strong) 78%, transparent);
972
+ border-radius: 11px;
973
+ padding: 11px 12px 10px;
974
+ background: color-mix(in srgb, var(--dialog-surface) 96%, transparent);
975
+ box-shadow: 0 12px 34px color-mix(in srgb, var(--text) 11%, transparent), inset 0 1px color-mix(in srgb, white 45%, transparent);
976
+ color: var(--text);
977
+ animation: notes-transfer-enter .18s cubic-bezier(.2, .8, .2, 1) both;
978
+ }
979
+ .notes-transfer-heading { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
980
+ .notes-transfer-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
981
+ .notes-transfer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 640; }
982
+ .notes-transfer-close { min-height: 23px; padding: 2px 5px; color: var(--text-tertiary); }
983
+ .notes-transfer-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 11px; }
984
+ .notes-transfer-track { position: relative; height: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--text-tertiary) 14%, transparent); }
985
+ .notes-transfer-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(var(--notes-transfer-progress)); transform-origin: left center; transition: transform .12s linear; }
986
+ .notes-transfer-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-tertiary); font-size: 9px; font-variant-numeric: tabular-nums; }
987
+ .notes-transfer-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
988
+ .notes-transfer-percent { flex: none; }
989
+ .notes-transfer[data-state="scanning"] .notes-transfer-fill { width: 34%; animation: notes-transfer-scan 1s cubic-bezier(.4, 0, .2, 1) infinite; }
990
+ .notes-transfer[data-state="complete"] .notes-transfer-mark { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 12%, transparent); }
991
+ .notes-transfer[data-state="error"] .notes-transfer-mark { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent); }
992
+ .notes-transfer[data-state="error"] .notes-transfer-detail { color: var(--danger); white-space: normal; }
993
+ @keyframes notes-transfer-enter { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
994
+ @keyframes notes-transfer-scan { from { transform: translateX(-115%); } to { transform: translateX(295%); } }
995
+ .note-picker { display: grid; gap: 12px; }
996
+ .note-picker-results { max-height: min(58vh, 540px); overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
997
+ .note-picker-row { width: 100%; min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--border); padding: 10px 12px; background: transparent; color: var(--text); text-align: left; }
998
+ .note-picker-row:last-child { border-bottom: 0; }
999
+ .note-picker-row:hover { background: var(--surface-hover); }
1000
+ .note-picker-row > span:last-child { min-width: 0; }
1001
+ .note-picker-row strong, .note-picker-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1002
+ .note-picker-row strong { font-size: 12px; }
1003
+ .note-picker-row small { margin-top: 2px; color: var(--text-tertiary); font-size: 10px; }
1004
+ .note-picker-empty { padding: 30px 18px; color: var(--text-tertiary); text-align: center; }
1005
+ .note-reference { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 6px; padding: 1px 6px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent); font-weight: 590; text-decoration: none; cursor: pointer; }
1006
+ .note-reference:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
717
1007
  .note-editor {
718
1008
  min-width: 0;
719
1009
  min-height: 0;
1010
+ height: 100%;
720
1011
  display: grid;
721
- grid-template-rows: auto minmax(0, 1fr) auto;
722
- background: var(--surface);
1012
+ grid-template-rows: auto minmax(0, 1fr) auto auto;
1013
+ overflow: hidden;
1014
+ background: var(--surface-editor);
723
1015
  container-name: note-editor;
724
1016
  container-type: inline-size;
725
1017
  }
@@ -728,16 +1020,38 @@ html,
728
1020
  .note-empty-content h3 { margin: 16px 0 5px; font-size: 17px; }
729
1021
  .note-empty-content p { margin: 0 0 18px; color: var(--text-tertiary); }
730
1022
  .empty-document-mark { display: inline-block; width: 38px; height: 47px; border: 1.5px solid var(--border-strong); border-radius: 5px; background: linear-gradient(var(--border), var(--border)) 9px 13px / 19px 1px no-repeat, linear-gradient(var(--border), var(--border)) 9px 20px / 15px 1px no-repeat; }
731
- .note-editor-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 9px 14px 9px 20px; }
1023
+ .note-editor-toolbar {
1024
+ position: relative;
1025
+ z-index: 2;
1026
+ min-height: 42px;
1027
+ display: flex;
1028
+ align-items: center;
1029
+ justify-content: space-between;
1030
+ gap: 14px;
1031
+ border-bottom: 1px solid var(--separator);
1032
+ padding: 5px 14px 5px 20px;
1033
+ background: var(--surface);
1034
+ -webkit-backdrop-filter: blur(16px) saturate(108%);
1035
+ backdrop-filter: blur(16px) saturate(108%);
1036
+ }
1037
+ .note-editor-loading { grid-template-rows: auto minmax(0, 1fr); }
1038
+ .editor-load-label { color: var(--text-tertiary); font-size: 10px; }
1039
+ .editor-paper-skeleton { gap: 15px; padding-top: clamp(38px, 6cqi, 74px); }
732
1040
  .note-breadcrumb { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--text-tertiary); font-size: 11px; white-space: nowrap; }
733
1041
  .note-breadcrumb strong { overflow: hidden; color: var(--text-secondary); font-weight: 560; text-overflow: ellipsis; }
1042
+ .note-toolbar-meta { display: inline-flex; gap: 10px; margin-left: 8px; color: var(--text-tertiary); font-size: 10px; }
1043
+ .note-toolbar-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
1044
+ .note-toolbar-meta > span + span::before { content: "·"; margin-right: 10px; color: var(--border-strong); }
734
1045
  .note-editor-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
735
1046
  .editor-save-status { margin-right: 4px; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
736
- .note-mode-switch { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: var(--surface-soft); }
737
- .note-mode-switch button { min-width: 48px; min-height: 28px; border: 0; border-radius: 6px; padding: 4px 9px; background: transparent; color: var(--text-tertiary); font-size: 11px; font-weight: 600; }
738
- .note-mode-switch button:hover { color: var(--text); }
739
- .note-mode-switch button[aria-selected="true"] { background: var(--surface-raised); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent); }
740
- .note-editor-scroll { min-height: 0; overflow: auto; container-type: inline-size; }
1047
+ .note-editor-scroll {
1048
+ min-height: 0;
1049
+ display: grid;
1050
+ grid-template-columns: minmax(0, 1fr);
1051
+ overflow: auto;
1052
+ overscroll-behavior: contain;
1053
+ container-type: inline-size;
1054
+ }
741
1055
  .document-finalized-banner {
742
1056
  display: grid;
743
1057
  grid-template-columns: auto minmax(0, 1fr) auto;
@@ -758,25 +1072,27 @@ html,
758
1072
  width: 100%;
759
1073
  min-width: 0;
760
1074
  min-height: 100%;
1075
+ display: flex;
1076
+ flex-direction: column;
761
1077
  margin: 0;
762
- padding: clamp(34px, 5cqi, 72px) max(clamp(24px, 6cqi, 84px), calc((100% - 1120px) / 2)) 90px;
1078
+ padding: clamp(32px, 5cqi, 62px) clamp(32px, 6cqi, 88px) 100px;
763
1079
  }
764
- .note-title-input { width: 100%; border: 0; padding: 0; background: transparent; color: var(--text); font-size: clamp(27px, 3.4vw, 40px); font-weight: 720; line-height: 1.18; letter-spacing: -.038em; outline: none; }
1080
+ .note-title-input { width: 100%; border: 0; padding: 0; background: transparent; color: var(--text); font-family: var(--font-reading); font-size: clamp(25px, 2.5vw, 32px); font-weight: 700; line-height: 1.22; letter-spacing: -.025em; outline: none; }
1081
+ .note-title-input:focus, .note-title-input:focus-visible { outline: 0; box-shadow: none; }
765
1082
  .note-title-input::placeholder { color: color-mix(in srgb, var(--text-tertiary) 62%, transparent); }
766
- .note-preview-title { margin: 0; color: var(--text); font-size: clamp(27px, 3.4cqi, 40px); font-weight: 720; line-height: 1.18; letter-spacing: -.038em; overflow-wrap: anywhere; }
767
- .note-document-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 14px 0 30px; color: var(--text-tertiary); font-size: 10px; }
768
- .note-body-editor { width: 100%; min-height: 420px; border: 0; padding: 0 0 80px; resize: none; overflow: hidden; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 15px; line-height: 1.82; outline: none; }
769
- .note-body-editor::placeholder { color: color-mix(in srgb, var(--text-tertiary) 70%, transparent); }
770
- .markdown-preview { min-width: 0; max-width: 100%; min-height: 420px; padding-bottom: 80px; color: var(--text-secondary); font-size: 15px; line-height: 1.78; overflow-wrap: anywhere; }
1083
+ .note-preview-title { margin: 0; color: var(--text); font-family: var(--font-reading); font-size: clamp(25px, 2.5cqi, 32px); font-weight: 700; line-height: 1.22; letter-spacing: -.025em; overflow-wrap: anywhere; }
1084
+ .knowledge-live-editor { width: 100%; min-height: 0; flex: 1; display: flex; margin-top: 18px; }
1085
+ .knowledge-live-editor .notes-live-editor-surface { width: 100%; min-height: 100%; flex: 1; padding-bottom: 72px; font: 16px/1.55 var(--font-reading); }
1086
+ .markdown-preview { min-width: 0; max-width: 100%; min-height: 420px; padding-bottom: 72px; color: color-mix(in srgb, var(--text) 82%, var(--text-secondary)); font: 16px/1.55 var(--font-reading); letter-spacing: normal; overflow-wrap: anywhere; }
771
1087
  .markdown-preview.is-empty { color: var(--text-tertiary); }
772
1088
  .markdown-preview > :first-child { margin-top: 0; }
773
1089
  .markdown-preview > :last-child { margin-bottom: 0; }
774
1090
  .markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4 { color: var(--text); line-height: 1.3; letter-spacing: -.018em; }
775
- .markdown-preview h1 { margin: 1.8em 0 .65em; font-size: 1.75em; }
776
- .markdown-preview h2 { margin: 1.7em 0 .6em; font-size: 1.4em; }
777
- .markdown-preview h3 { margin: 1.5em 0 .5em; font-size: 1.16em; }
778
- .markdown-preview h4 { margin: 1.35em 0 .45em; font-size: 1em; }
779
- .markdown-preview p, .markdown-preview ul, .markdown-preview ol, .markdown-preview blockquote { margin: .85em 0; }
1091
+ .markdown-preview h1 { margin: 1.5em 0 .55em; font-size: 1.72em; }
1092
+ .markdown-preview h2 { margin: 1.4em 0 .5em; font-size: 1.38em; }
1093
+ .markdown-preview h3 { margin: 1.25em 0 .42em; font-size: 1.15em; }
1094
+ .markdown-preview h4 { margin: 1.15em 0 .38em; font-size: 1em; }
1095
+ .markdown-preview p, .markdown-preview ul, .markdown-preview ol, .markdown-preview blockquote { margin: .68em 0; }
780
1096
  .markdown-preview ul, .markdown-preview ol { padding-left: 1.55em; }
781
1097
  .markdown-preview li + li { margin-top: .28em; }
782
1098
  .markdown-preview a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@@ -804,7 +1120,23 @@ html,
804
1120
  .markdown-preview th { color: var(--text); font-weight: 650; }
805
1121
  .markdown-preview hr { height: 1px; margin: 2em 0; border: 0; background: var(--border); }
806
1122
  .markdown-preview img { max-width: 100%; height: auto; border-radius: 10px; }
807
- .note-inspector { min-height: 48px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--border); padding: 7px 16px; background: color-mix(in srgb, var(--surface-soft) 35%, var(--surface)); }
1123
+ .note-inspector { min-height: 48px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--separator); padding: 7px 16px; background: var(--material-toolbar); }
1124
+ .document-reference-bar { min-width: 0; min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--separator); padding: 7px 14px 7px 16px; background: var(--material-toolbar); }
1125
+ .document-reference-heading { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); white-space: nowrap; }
1126
+ .document-reference-heading strong { font-size: 12px; font-weight: 630; }
1127
+ .document-reference-heading small { color: var(--text-tertiary); font-size: 11px; }
1128
+ .document-reference-mark { width: 6px; height: 6px; border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border)); border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); }
1129
+ .document-reference-list { min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
1130
+ .document-reference-list::-webkit-scrollbar { display: none; }
1131
+ .document-reference-chip { min-width: 0; height: 32px; display: inline-flex; flex: 0 1 auto; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
1132
+ .document-reference-open { min-width: 0; height: 100%; display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 3px 7px; background: transparent; color: var(--text-secondary); }
1133
+ .document-reference-open:hover { background: var(--surface-hover); color: var(--text); }
1134
+ .document-reference-open .note-node-icon { width: 16px; height: 16px; flex: none; }
1135
+ .document-reference-open > span:last-child { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
1136
+ .document-reference-remove { width: 28px; height: 100%; flex: none; border: 0; border-left: 1px solid var(--border); padding: 0; background: transparent; color: var(--text-tertiary); font-size: 15px; }
1137
+ .document-reference-remove:hover { background: var(--danger-soft); color: var(--danger); }
1138
+ .document-reference-empty { color: var(--text-tertiary); font-size: 12px; }
1139
+ .document-reference-add { min-height: 27px; white-space: nowrap; }
808
1140
  .note-inspector label { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); font-size: 10px; }
809
1141
  .note-inspector input, .note-meta-select { height: 30px; border: 1px solid transparent; border-radius: 6px; padding: 4px 7px; background-color: transparent; color: var(--text-secondary); outline: none; }
810
1142
  .note-meta-select {
@@ -823,7 +1155,7 @@ html,
823
1155
  .note-inspector input:focus, .note-meta-select:focus { border-color: var(--border-strong); background-color: var(--surface); }
824
1156
  .note-tags-field { min-width: 0; flex: 1; }
825
1157
  .note-tags-field input { width: min(100%, 360px); }
826
- .note-format-hint { margin-left: auto; color: var(--text-tertiary); font-size: 9px; white-space: nowrap; }
1158
+ .note-format-hint { margin-left: auto; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
827
1159
 
828
1160
  @container note-editor (max-width: 700px) {
829
1161
  .note-editor-toolbar {
@@ -840,14 +1172,11 @@ html,
840
1172
  justify-content: flex-start;
841
1173
  }
842
1174
 
843
- .note-mode-switch { margin-right: auto; }
844
1175
  .editor-save-status { margin-left: auto; }
845
1176
  }
846
1177
 
847
1178
  @container note-editor (max-width: 480px) {
848
1179
  .note-breadcrumb { display: none; }
849
- .note-mode-switch { flex: 1 1 112px; }
850
- .note-mode-switch button { min-width: 0; flex: 1; }
851
1180
  .note-editor-actions > .button { flex: 1 1 auto; }
852
1181
  }
853
1182
 
@@ -869,15 +1198,15 @@ html,
869
1198
  .list-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; color: var(--text-tertiary); font-size: 11px; }
870
1199
  .list-actions { display: flex; align-items: flex-start; gap: 4px; }
871
1200
 
872
- .badge { display: inline-flex; align-items: center; gap: 5px; min-height: 21px; border-radius: 6px; padding: 2px 7px; background: var(--surface-soft); color: var(--text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; }
1201
+ .badge { display: inline-flex; align-items: center; gap: 5px; min-height: 21px; border-radius: var(--radius-small); padding: 2px 7px; background: var(--material-control); color: var(--text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; }
873
1202
  .badge.accent { background: var(--accent-soft); color: var(--accent); }
874
1203
  .badge.success { background: var(--success-soft); color: var(--success); }
875
1204
  .badge.warning { background: var(--warning-soft); color: var(--warning); }
876
1205
  .badge.danger { background: var(--danger-soft); color: var(--danger); }
877
1206
 
878
1207
  .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
879
- .knowledge-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); padding: 17px; background: var(--surface); }
880
- .knowledge-card:hover { border-color: var(--border-strong); box-shadow: 0 5px 20px rgb(20 25 35 / 5%); }
1208
+ .knowledge-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 17px; background: var(--material-panel); box-shadow: var(--shadow-soft); }
1209
+ .knowledge-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-panel); }
881
1210
  .knowledge-card h3 { margin: 11px 0 7px; font-size: 15px; line-height: 1.4; }
882
1211
  .knowledge-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--text-secondary); line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
883
1212
  .card-top, .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@@ -887,42 +1216,94 @@ html,
887
1216
  .tag { border-radius: 6px; padding: 2px 7px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; }
888
1217
  .tag.is-empty { color: var(--text-tertiary); font-style: italic; }
889
1218
 
890
- .tabs { display: inline-flex; gap: 3px; border-radius: 10px; padding: 3px; background: var(--surface-soft); }
891
- .tab { min-height: 33px; border: 0; border-radius: 7px; padding: 5px 12px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
892
- .tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgb(0 0 0 / 7%); }
1219
+ .tabs { display: inline-flex; gap: 3px; border: 1px solid var(--separator); border-radius: 10px; padding: 3px; background: var(--material-control); box-shadow: inset 0 1px 0 var(--surface-highlight); }
1220
+ .tab { min-height: 31px; border: 0; border-radius: var(--radius-small); padding: 5px 12px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out); }
1221
+ .tab:hover { color: var(--text); transform: translateY(-1px); }
1222
+ .tab[aria-selected="true"] { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-soft); }
893
1223
 
894
1224
  .candidate-list { display: grid; gap: 13px; }
895
- .candidate { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
1225
+ .candidate { overflow: hidden; border: 1px solid var(--panel-border); border-radius: var(--radius-panel); background: var(--surface-pane); box-shadow: var(--shadow-control); content-visibility: auto; contain-intrinsic-size: auto 560px; }
896
1226
  .candidate-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px 12px; }
897
1227
  .candidate-header h3 { margin: 8px 0 0; font-size: 15px; }
898
- .candidate-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr); gap: 20px; padding: 0 18px 17px; }
899
- .candidate-content { margin: 0; color: var(--text-secondary); white-space: pre-wrap; }
900
- .candidate-body.is-conflict { grid-template-columns: 1fr; }
901
- .candidate-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
902
- .candidate-comparison section { min-width: 0; border: 1px solid var(--border); border-radius: 9px; padding: 12px; background: var(--surface-soft); }
903
- .candidate-comparison strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 12px; }
904
- .candidate-comparison pre { overflow: auto; max-height: 280px; margin: 0; color: var(--text-secondary); font: inherit; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
905
- .candidate-reason { border-left: 2px solid var(--border-strong); padding-left: 13px; color: var(--text-secondary); font-size: 12px; }
906
- .candidate-reason strong { display: block; margin-bottom: 5px; color: var(--text-tertiary); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
907
- .candidate-target { display: block; margin-bottom: 13px; border-radius: 7px; padding: 7px 9px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
1228
+ .candidate-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .34fr); gap: 16px; padding: 0 18px 17px; }
1229
+ .candidate-change { min-width: 0; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 11px; background: var(--material-panel); }
1230
+ .candidate-change.is-conflict { border-color: color-mix(in srgb, var(--warning) 24%, var(--border)); }
1231
+ .candidate-change-heading { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 9px 12px; background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface)); }
1232
+ .candidate-change-heading > div:first-child { min-width: 0; }
1233
+ .candidate-change-heading strong, .candidate-change-heading small { display: block; }
1234
+ .candidate-change-heading strong { color: var(--text); font-size: 12px; }
1235
+ .candidate-change-heading small { overflow: hidden; margin-top: 2px; color: var(--text-tertiary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
1236
+ .diff-summary { display: flex; flex: none; align-items: center; gap: 4px; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
1237
+ .diff-stat { border-radius: 5px; padding: 4px 6px; background: var(--surface); color: var(--text-tertiary); }
1238
+ .diff-stat.additions { background: var(--success-soft); color: var(--success); }
1239
+ .diff-stat.deletions { background: var(--danger-soft); color: var(--danger); }
1240
+ .diff-notice { border-bottom: 1px solid var(--border); padding: 7px 12px; background: var(--warning-soft); color: var(--warning); font-size: 11px; }
1241
+ .diff-viewer { overflow: auto; max-height: 390px; overscroll-behavior: contain; background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
1242
+ .diff-column-headings, .diff-line { display: grid; grid-template-columns: 42px 42px 22px minmax(0, 1fr); }
1243
+ .diff-column-headings { position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--border); background: var(--surface-raised); color: var(--text-tertiary); font-size: 10px; }
1244
+ .diff-column-headings span { min-width: 0; padding: 4px 7px; }
1245
+ .diff-column-headings span:nth-child(-n + 3) { border-right: 1px solid var(--border); text-align: right; }
1246
+ .diff-line { min-height: 24px; color: var(--text-secondary); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
1247
+ .diff-line + .diff-line { border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }
1248
+ .diff-line-number, .diff-marker { min-width: 0; border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent); padding: 2px 7px; color: var(--text-tertiary); text-align: right; user-select: none; }
1249
+ .diff-marker { padding-inline: 5px; text-align: center; }
1250
+ .diff-code { min-width: 0; padding: 2px 9px; color: inherit; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
1251
+ .diff-line.is-add { background: color-mix(in srgb, var(--success-soft) 72%, var(--surface)); color: color-mix(in srgb, var(--success) 72%, var(--text)); }
1252
+ .diff-line.is-remove { background: color-mix(in srgb, var(--danger-soft) 68%, var(--surface)); color: color-mix(in srgb, var(--danger) 68%, var(--text)); }
1253
+ .diff-line.is-add .diff-marker { color: var(--success); font-weight: 700; }
1254
+ .diff-line.is-remove .diff-marker { color: var(--danger); font-weight: 700; }
1255
+ .diff-line.is-omitted { background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)); color: var(--text-tertiary); }
1256
+ .diff-omitted-copy { padding: 3px 9px; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; font-size: 11px; }
1257
+ .diff-empty { padding: 22px; color: var(--text-tertiary); text-align: center; }
1258
+ .candidate-change-unavailable { padding: 20px; background: var(--warning-soft); color: var(--warning); }
1259
+ .candidate-change-unavailable p { margin: 5px 0 0; }
1260
+ .candidate-reason { display: grid; align-content: start; gap: 14px; border-left: 1px solid var(--border); padding-left: 15px; color: var(--text-secondary); font-size: 12px; }
1261
+ .candidate-reason section { min-width: 0; }
1262
+ .candidate-reason strong { display: block; margin-bottom: 5px; color: var(--text-tertiary); font-size: 11px; font-weight: 600; }
1263
+ .candidate-reason p { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
1264
+ .candidate-target { display: block; border-radius: 7px; padding: 7px 9px; background: var(--accent-soft); color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
1265
+ .candidate-metadata ul { display: grid; gap: 4px; margin: 0; padding-left: 17px; }
1266
+ .candidate-metadata li { overflow-wrap: anywhere; }
908
1267
  .candidate-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--border); padding: 11px 18px; background: var(--surface-hover); }
909
1268
  .candidate-footer small { color: var(--text-tertiary); }
910
- .candidate-footer div { display: flex; gap: 7px; }
1269
+ .candidate-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
911
1270
 
912
- .empty-state { display: grid; place-items: center; min-height: 230px; border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 28px; text-align: center; }
1271
+ .empty-state { display: grid; place-items: center; min-height: 230px; border: 1px dashed color-mix(in srgb, var(--panel-border) 76%, transparent); border-radius: var(--radius-panel); padding: 28px; background: color-mix(in srgb, var(--surface-pane) 70%, transparent); text-align: center; }
913
1272
  .empty-state strong { font-size: 15px; }
914
1273
  .empty-state p { max-width: 420px; margin: 7px 0 0; color: var(--text-tertiary); }
915
1274
  .empty-state .button { margin-top: 16px; }
916
1275
 
917
1276
  .loading { display: grid; place-items: center; min-height: 240px; color: var(--text-tertiary); }
918
- .loading-skeleton { min-height: 280px; padding-top: 6px; }
1277
+ .loading-skeleton { min-height: 360px; padding-top: 2px; }
1278
+ .skeleton-heading { min-height: 52px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
1279
+ .skeleton-phase { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-top: 3px; color: var(--text-tertiary); font-size: 11px; white-space: nowrap; }
1280
+ .skeleton-phase::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); animation: loading-pulse 1.4s ease-in-out infinite; }
919
1281
  .skeleton-line, .skeleton-block { position: relative; overflow: hidden; background: var(--surface-soft); }
920
1282
  .skeleton-line::after, .skeleton-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-raised) 72%, transparent), transparent); transform: translateX(-100%); animation: skeleton-shimmer 1.4s ease-in-out infinite; }
921
1283
  .skeleton-title { width: min(280px, 48%); height: 22px; border-radius: 7px; }
922
1284
  .skeleton-copy { width: min(460px, 72%); height: 12px; margin-top: 10px; border-radius: 5px; }
923
1285
  .skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
924
- .skeleton-block { height: 150px; border-radius: var(--radius); }
1286
+ .skeleton-block { height: 150px; border-radius: var(--radius-panel); }
1287
+ .skeleton-workspace { min-height: 540px; display: grid; grid-template-columns: minmax(220px, 28%) minmax(0, 1fr); overflow: hidden; margin-top: 16px; border: 1px solid color-mix(in srgb, var(--panel-border) 78%, transparent); border-radius: var(--radius-shell); background: var(--surface-editor); box-shadow: var(--shadow-panel); }
1288
+ .skeleton-pane { min-width: 0; padding: 22px; }
1289
+ .skeleton-pane-tree { display: grid; align-content: start; gap: 14px; border-right: 1px solid var(--separator); background: var(--surface-pane); }
1290
+ .skeleton-tree-row { width: 88%; height: 13px; border-radius: 5px; }
1291
+ .skeleton-tree-row.is-1 { width: 68%; margin-left: 19px; }
1292
+ .skeleton-tree-row.is-2 { width: 76%; margin-left: 19px; }
1293
+ .skeleton-pane-paper { display: grid; align-content: start; gap: 15px; padding: clamp(42px, 6vw, 82px); }
1294
+ .skeleton-paper-title { width: min(460px, 66%); height: 31px; margin-bottom: 16px; border-radius: 8px; }
1295
+ .skeleton-paper-row { width: 94%; height: 12px; border-radius: 5px; }
1296
+ .skeleton-paper-row.is-1 { width: 82%; }
1297
+ .skeleton-paper-row.is-2 { width: 88%; }
1298
+ .skeleton-paper-row.is-3 { width: 58%; margin-bottom: 12px; }
1299
+ .skeleton-pane-list { display: grid; align-content: start; gap: 3px; padding: 18px; }
1300
+ .skeleton-list-row { min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; border-bottom: 1px solid var(--separator); }
1301
+ .skeleton-list-row .skeleton-block { width: 30px; height: 34px; border-radius: 6px; }
1302
+ .skeleton-list-row .skeleton-line { width: 66%; height: 12px; border-radius: 5px; }
1303
+ .notes-selection-loading { overflow: hidden; }
1304
+ .notes-selection-skeleton { display: grid; align-content: start; gap: 15px; padding: clamp(34px, 5vw, 72px); }
925
1305
  @keyframes skeleton-shimmer { to { transform: translateX(100%); } }
1306
+ @keyframes loading-pulse { 0%, 100% { opacity: .5; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
926
1307
 
927
1308
  .error-state { border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-radius: var(--radius); padding: 18px; background: var(--danger-soft); color: var(--danger); }
928
1309
  .error-state p { margin: 0 0 12px; }
@@ -933,7 +1314,7 @@ html,
933
1314
  .token-row strong { display: block; }
934
1315
  .token-row small { color: var(--text-tertiary); }
935
1316
  .permissions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
936
- .api-access-card { display: grid; gap: 14px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--surface); }
1317
+ .api-access-card { display: grid; gap: 14px; margin-bottom: 20px; border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 18px; background: var(--material-panel); box-shadow: var(--shadow-soft); }
937
1318
  .api-access-heading, .api-access-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
938
1319
  .api-access-heading strong { font-size: 15px; }
939
1320
  .api-access-heading p { margin: 4px 0 0; color: var(--text-tertiary); }
@@ -943,17 +1324,20 @@ html,
943
1324
  .api-access-actions { align-items: center; border-top: 1px solid var(--border); padding-top: 13px; }
944
1325
  .api-access-actions small { color: var(--text-tertiary); }
945
1326
 
946
- .dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(8 10 15 / 52%); backdrop-filter: blur(4px); }
1327
+ .dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(8 12 14 / 38%); -webkit-backdrop-filter: blur(10px) saturate(88%); backdrop-filter: blur(10px) saturate(88%); animation: dialog-backdrop-enter var(--motion-base) ease both; }
947
1328
  .dialog {
948
1329
  width: min(100%, 640px);
949
1330
  max-height: min(88vh, 820px);
950
1331
  display: flex;
951
1332
  flex-direction: column;
952
- border: 1px solid var(--border-strong);
953
- border-radius: 18px;
1333
+ border: 1px solid var(--panel-border);
1334
+ border-radius: 16px;
954
1335
  background: var(--dialog-surface);
955
- box-shadow: 0 28px 80px rgb(0 0 0 / 24%);
1336
+ box-shadow: 0 1px 0 var(--surface-highlight) inset, var(--shadow-floating);
1337
+ animation: dialog-enter var(--motion-base) var(--ease-spring) both;
956
1338
  }
1339
+ @keyframes dialog-backdrop-enter { from { opacity: 0; } }
1340
+ @keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } }
957
1341
  .dialog.narrow { width: min(100%, 460px); }
958
1342
  .dialog-backdrop.sheet-backdrop {
959
1343
  place-items: stretch end;
@@ -971,11 +1355,11 @@ html,
971
1355
  animation: sheet-enter .2s cubic-bezier(.2, .8, .2, 1);
972
1356
  }
973
1357
  @keyframes sheet-enter { from { opacity: .75; transform: translateX(18px); } }
974
- .dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding: 18px 20px; }
1358
+ .dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--separator); padding: 18px 20px; }
975
1359
  .dialog-header h2 { margin: 0; font-size: 17px; }
976
1360
  .dialog-header p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
977
1361
  .dialog-body { overflow: auto; padding: 20px; }
978
- .dialog-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); padding: 13px 20px; }
1362
+ .dialog-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--separator); padding: 13px 20px; background: color-mix(in srgb, var(--surface-soft) 28%, transparent); }
979
1363
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
980
1364
  .form-grid .span-2 { grid-column: 1 / -1; }
981
1365
  .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@@ -1013,17 +1397,29 @@ html,
1013
1397
  .secret-value code { min-width: 0; flex: 1; overflow-wrap: anywhere; border-radius: 7px; padding: 8px; background: var(--surface); color: var(--text); }
1014
1398
 
1015
1399
  .toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 8px; pointer-events: none; }
1016
- .toast { max-width: 360px; border: 1px solid var(--border-strong); border-radius: 11px; padding: 11px 14px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow); animation: toast-in .18s ease-out; }
1400
+ .toast { max-width: 420px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border-strong); border-radius: 11px; padding: 11px 12px 11px 14px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-floating); animation: toast-in var(--motion-base) var(--ease-out); pointer-events: auto; }
1401
+ .toast > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
1402
+ .toast-close { flex: none; min-height: 28px; }
1017
1403
  .toast.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
1018
1404
  @keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }
1019
1405
 
1406
+ @media (prefers-reduced-transparency: reduce) {
1407
+ .sidebar, .topbar, .note-tree-panel, .notes-browser, .notes-content-header, .notes-document-toolbar, .note-editor-toolbar, .dialog-backdrop {
1408
+ -webkit-backdrop-filter: none;
1409
+ backdrop-filter: none;
1410
+ }
1411
+ .sidebar, .topbar, .note-tree-panel, .notes-browser, .notes-content-header, .notes-document-toolbar, .note-editor-toolbar { background: var(--surface); }
1412
+ }
1413
+
1020
1414
  @media (max-width: 980px) {
1021
1415
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1022
1416
  .dashboard-grid { grid-template-columns: 1fr; }
1023
1417
  .candidate-body { grid-template-columns: 1fr; }
1418
+ .candidate-reason { border-top: 1px solid var(--border); border-left: 0; padding-top: 14px; padding-left: 0; }
1024
1419
  .mount-manager-toolbar .tabs { width: 100%; }
1025
1420
  .note-workspace { grid-template-columns: minmax(210px, 30%) minmax(0, 1fr); }
1026
1421
  .note-paper { padding-inline: clamp(28px, 6cqi, 62px); }
1422
+ .notes-workspace { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
1027
1423
  }
1028
1424
 
1029
1425
  @media (max-width: 1180px) {
@@ -1044,9 +1440,9 @@ html,
1044
1440
  }
1045
1441
 
1046
1442
  @media (max-width: 760px) {
1047
- .candidate-comparison { grid-template-columns: 1fr; }
1048
1443
  :root { --sidebar-width: 0px; }
1049
- .app-shell { display: block; }
1444
+ .app-shell { height: auto; min-height: 100dvh; display: block; overflow: visible; }
1445
+ .main { width: 100%; height: auto; min-height: 100dvh; overflow: visible; }
1050
1446
  .app-sidebar-resizer { display: none; }
1051
1447
  .pane-toggle-button[data-pane="main"] { display: none; }
1052
1448
  .pane-toggle-button[data-pane="library"] { display: inline-grid; }
@@ -1059,6 +1455,9 @@ html,
1059
1455
  .topbar h1 { font-size: 17px; }
1060
1456
  .topbar p { display: none; }
1061
1457
  .page { padding: 22px 16px 42px; }
1458
+ .app-shell[data-view="notes"] .page { height: auto; min-height: calc(100dvh - 64px); overflow: visible; padding: 0; }
1459
+ .app-shell[data-view="notes"] .view-stage { height: auto; min-height: inherit; overflow: visible; }
1460
+ .app-shell[data-view="notes"] .notes-page { height: auto; }
1062
1461
  .workspace-switcher { align-items: stretch; flex-direction: column; gap: 10px; }
1063
1462
  .workspace-switcher-leading { align-items: flex-start; }
1064
1463
  .workspace-switcher p { text-align: left; }
@@ -1093,6 +1492,9 @@ html,
1093
1492
  .document-finalized-banner p { grid-column: 1; }
1094
1493
  .note-title-input { font-size: 26px; }
1095
1494
  .note-inspector { align-items: stretch; flex-direction: column; gap: 5px; padding: 8px 12px; }
1495
+ .document-reference-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 7px 10px; }
1496
+ .document-reference-heading { display: none; }
1497
+ .document-reference-open > span:last-child { max-width: 130px; }
1096
1498
  .note-inspector label { justify-content: space-between; }
1097
1499
  .note-tags-field input { width: 100%; }
1098
1500
  .note-format-hint { display: none; }
@@ -1113,6 +1515,14 @@ html,
1113
1515
  .mount-bulk-actions .button { flex: 1 1 auto; }
1114
1516
  .candidate-header, .candidate-footer { align-items: flex-start; flex-direction: column; }
1115
1517
  .candidate-footer { gap: 9px; }
1518
+ .candidate-actions { width: 100%; justify-content: flex-start; }
1519
+ .notes-workspace { height: auto; min-height: calc(100dvh - 64px); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(320px, 44dvh) minmax(430px, auto); }
1520
+ .notes-browser { border-right: 0; border-bottom: 1px solid var(--border); }
1521
+ .notes-file-list { min-width: 560px; }
1522
+ .button, .tab, .nav-button, .note-tree-base, .note-tree-document, .note-tree-new { min-height: 44px; }
1523
+ .note-add-button, .pane-toggle-button, .mobile-menu { width: 44px; min-width: 44px; min-height: 44px; }
1524
+ .toast-region { right: 12px; bottom: 12px; left: 12px; }
1525
+ .toast { max-width: none; }
1116
1526
  }
1117
1527
 
1118
1528
  @media (max-width: 520px) {
@@ -1146,6 +1556,25 @@ html,
1146
1556
  .secret-value { flex-direction: column; }
1147
1557
  .reader-actions .badge { display: none; }
1148
1558
  .reader-footer { flex-direction: column; gap: 2px; }
1559
+ .candidate-header { padding-inline: 14px; }
1560
+ .candidate-body { padding-inline: 14px; }
1561
+ .candidate-footer { padding-inline: 14px; }
1562
+ .candidate-change-heading { align-items: flex-start; flex-direction: column; }
1563
+ .diff-column-headings, .diff-line { grid-template-columns: 30px 30px 20px minmax(0, 1fr); }
1564
+ .diff-column-headings span, .diff-line-number { padding-inline: 4px; }
1565
+ .candidate-actions .button { flex: 1 1 auto; }
1566
+ .notes-heading { align-items: flex-start; }
1567
+ .notes-browser-actions { flex-wrap: wrap; }
1568
+ .notes-content-title { align-items: stretch; flex-direction: column; }
1569
+ .notes-content-actions .button { flex: 1 1 auto; }
1570
+ .notes-document-toolbar { align-items: center; flex-direction: row; overflow-x: auto; }
1571
+ .notes-toolbar-leading { flex: 1 0 240px; }
1572
+ .notes-file-info { overflow: hidden; }
1573
+ .notes-document-actions { width: auto; flex-wrap: nowrap; justify-content: flex-end; }
1574
+ .notes-content.is-document { --notes-document-inline: 16px; }
1575
+ .notes-content.is-document.has-line-numbers { --notes-document-inline: 30px; }
1576
+ .notes-document-title { padding-top: 24px; }
1577
+ .notes-content.is-document > .notes-live-editor, .notes-content.is-document > .notes-plain-editor { padding-bottom: 64px; }
1149
1578
  }
1150
1579
 
1151
1580
  @media (prefers-reduced-motion: reduce) {