@lemoncat7/dsh-knowledge 1.2.0 → 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 (97) hide show
  1. package/README.md +22 -2
  2. package/docs/architecture.md +30 -4
  3. package/docs/requirements.md +10 -0
  4. package/lib/api.d.ts.map +1 -1
  5. package/lib/api.js +194 -1
  6. package/lib/api.js.map +1 -1
  7. package/lib/atomic-file.d.ts +1 -1
  8. package/lib/atomic-file.d.ts.map +1 -1
  9. package/lib/atomic-file.js +0 -1
  10. package/lib/atomic-file.js.map +1 -1
  11. package/lib/client.d.ts.map +1 -1
  12. package/lib/client.js +37 -34
  13. package/lib/client.js.map +2 -2
  14. package/lib/content-safety.d.ts +12 -0
  15. package/lib/content-safety.d.ts.map +1 -0
  16. package/lib/content-safety.js +38 -0
  17. package/lib/content-safety.js.map +1 -0
  18. package/lib/domain.d.ts +13 -0
  19. package/lib/domain.d.ts.map +1 -1
  20. package/lib/domain.js.map +1 -1
  21. package/lib/extraction.d.ts.map +1 -1
  22. package/lib/extraction.js +8 -2
  23. package/lib/extraction.js.map +1 -1
  24. package/lib/index.d.ts +1 -0
  25. package/lib/index.d.ts.map +1 -1
  26. package/lib/index.js +6 -1
  27. package/lib/index.js.map +1 -1
  28. package/lib/local-provider.d.ts +24 -1
  29. package/lib/local-provider.d.ts.map +1 -1
  30. package/lib/local-provider.js +302 -2
  31. package/lib/local-provider.js.map +1 -1
  32. package/lib/management-proxy.d.ts.map +1 -1
  33. package/lib/management-proxy.js +22 -13
  34. package/lib/management-proxy.js.map +1 -1
  35. package/lib/note-reference-handle.d.ts +15 -0
  36. package/lib/note-reference-handle.d.ts.map +1 -0
  37. package/lib/note-reference-handle.js +54 -0
  38. package/lib/note-reference-handle.js.map +1 -0
  39. package/lib/note-reference-tools.d.ts +6 -0
  40. package/lib/note-reference-tools.d.ts.map +1 -0
  41. package/lib/note-reference-tools.js +119 -0
  42. package/lib/note-reference-tools.js.map +1 -0
  43. package/lib/note-tools.d.ts +6 -0
  44. package/lib/note-tools.d.ts.map +1 -0
  45. package/lib/note-tools.js +283 -0
  46. package/lib/note-tools.js.map +1 -0
  47. package/lib/notes/domain.d.ts +44 -0
  48. package/lib/notes/domain.d.ts.map +1 -0
  49. package/lib/notes/domain.js +38 -0
  50. package/lib/notes/domain.js.map +1 -0
  51. package/lib/notes/store.d.ts +39 -0
  52. package/lib/notes/store.d.ts.map +1 -0
  53. package/lib/notes/store.js +407 -0
  54. package/lib/notes/store.js.map +1 -0
  55. package/lib/provider.d.ts +17 -0
  56. package/lib/provider.d.ts.map +1 -1
  57. package/lib/remote-provider.d.ts +19 -0
  58. package/lib/remote-provider.d.ts.map +1 -1
  59. package/lib/remote-provider.js +139 -13
  60. package/lib/remote-provider.js.map +1 -1
  61. package/lib/runtime.d.ts +1 -0
  62. package/lib/runtime.d.ts.map +1 -1
  63. package/lib/runtime.js.map +1 -1
  64. package/lib/theme-bridge.js +12 -12
  65. package/lib/theme-bridge.js.map +1 -1
  66. package/lib/tool-authorization.d.ts +14 -0
  67. package/lib/tool-authorization.d.ts.map +1 -0
  68. package/lib/tool-authorization.js +124 -0
  69. package/lib/tool-authorization.js.map +1 -0
  70. package/lib/tool-input.d.ts +6 -0
  71. package/lib/tool-input.d.ts.map +1 -0
  72. package/lib/tool-input.js +27 -0
  73. package/lib/tool-input.js.map +1 -0
  74. package/lib/tools.d.ts +2 -1
  75. package/lib/tools.d.ts.map +1 -1
  76. package/lib/tools.js +29 -179
  77. package/lib/tools.js.map +1 -1
  78. package/lib/tracking.d.ts +29 -0
  79. package/lib/tracking.d.ts.map +1 -0
  80. package/lib/tracking.js +141 -0
  81. package/lib/tracking.js.map +1 -0
  82. package/lib/web-markdown-preview.d.ts.map +1 -1
  83. package/lib/web-markdown-preview.js +10 -0
  84. package/lib/web-markdown-preview.js.map +1 -1
  85. package/lib/web-note-editor.d.ts +44 -0
  86. package/lib/web-note-editor.d.ts.map +1 -0
  87. package/lib/web-note-editor.js +118 -0
  88. package/lib/web-note-editor.js.map +1 -0
  89. package/lib/web.d.ts.map +1 -1
  90. package/lib/web.js +2 -1
  91. package/lib/web.js.map +1 -1
  92. package/package.json +12 -1
  93. package/web/app.js +1617 -89
  94. package/web/index.html +1 -0
  95. package/web/markdown-preview.js +8 -8
  96. package/web/note-editor.js +220 -0
  97. package/web/styles.css +512 -160
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,6 +198,9 @@ 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,
@@ -179,16 +212,16 @@ html,
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, .diff-viewer, .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, .diff-viewer, .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, .diff-viewer, .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, .diff-viewer, .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,10 +729,10 @@ 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);
662
736
  }
663
737
  .note-tree-panel {
664
738
  min-width: 0;
@@ -667,8 +741,10 @@ html,
667
741
  display: grid;
668
742
  grid-template-rows: auto auto minmax(0, 1fr) auto;
669
743
  overflow: hidden;
670
- border-right: 1px solid var(--border);
671
- background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
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%);
672
748
  }
673
749
  .note-tree-scrim { display: none; }
674
750
  .note-tree-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px 8px 16px; }
@@ -677,8 +753,8 @@ html,
677
753
  .note-add-button { width: 30px; min-width: 30px; min-height: 30px; padding: 0; font-size: 18px; font-weight: 400; }
678
754
  .note-tree-search-wrap { position: relative; padding: 5px 10px 9px; }
679
755
  .note-tree-search-wrap .search-symbol { left: 20px; }
680
- .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; }
681
- .note-tree-search:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface); }
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); }
682
758
  .note-tree {
683
759
  min-height: 0;
684
760
  overflow-x: hidden;
@@ -688,8 +764,8 @@ html,
688
764
  }
689
765
  .note-tree-group + .note-tree-group { margin-top: 3px; }
690
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; }
691
- .note-tree-base { min-height: 34px; gap: 7px; border-radius: 7px; padding: 5px 7px; font-weight: 620; }
692
- .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); }
693
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; }
694
770
  .note-tree-group[data-expanded="true"] .tree-disclosure { transform: rotate(45deg) translate(-1px, -1px); }
695
771
  .tree-folder-icon {
@@ -707,8 +783,8 @@ html,
707
783
  .tree-base-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
708
784
  .tree-count { min-width: 20px; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
709
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); }
710
- .note-tree-document { position: relative; min-height: 38px; gap: 8px; border-radius: 7px; padding: 5px 8px; }
711
- .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); }
712
788
  .tree-document-icon {
713
789
  width: 14px;
714
790
  height: 17px;
@@ -725,18 +801,217 @@ html,
725
801
  .note-tree-document > .badge { min-height: 17px; padding: 1px 5px; font-size: 8px; }
726
802
  .tree-document-copy strong, .tree-document-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
727
803
  .tree-document-copy strong { font-size: 12px; font-weight: 540; }
728
- .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; }
729
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; }
730
812
  .note-tree-footer { border-top: 1px solid var(--border); padding: 8px 11px; }
731
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)); }
732
1007
  .note-editor {
733
1008
  min-width: 0;
734
1009
  min-height: 0;
735
1010
  height: 100%;
736
1011
  display: grid;
737
- grid-template-rows: auto minmax(0, 1fr) auto;
1012
+ grid-template-rows: auto minmax(0, 1fr) auto auto;
738
1013
  overflow: hidden;
739
- background: var(--surface);
1014
+ background: var(--surface-editor);
740
1015
  container-name: note-editor;
741
1016
  container-type: inline-size;
742
1017
  }
@@ -748,25 +1023,31 @@ html,
748
1023
  .note-editor-toolbar {
749
1024
  position: relative;
750
1025
  z-index: 2;
751
- min-height: 58px;
1026
+ min-height: 42px;
752
1027
  display: flex;
753
1028
  align-items: center;
754
1029
  justify-content: space-between;
755
1030
  gap: 14px;
756
- border-bottom: 1px solid var(--border);
757
- padding: 9px 14px 9px 20px;
1031
+ border-bottom: 1px solid var(--separator);
1032
+ padding: 5px 14px 5px 20px;
758
1033
  background: var(--surface);
1034
+ -webkit-backdrop-filter: blur(16px) saturate(108%);
1035
+ backdrop-filter: blur(16px) saturate(108%);
759
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); }
760
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; }
761
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); }
762
1045
  .note-editor-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
763
1046
  .editor-save-status { margin-right: 4px; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
764
- .note-mode-switch { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; background: var(--surface-soft); }
765
- .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; }
766
- .note-mode-switch button:hover { color: var(--text); }
767
- .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); }
768
1047
  .note-editor-scroll {
769
1048
  min-height: 0;
1049
+ display: grid;
1050
+ grid-template-columns: minmax(0, 1fr);
770
1051
  overflow: auto;
771
1052
  overscroll-behavior: contain;
772
1053
  container-type: inline-size;
@@ -791,25 +1072,27 @@ html,
791
1072
  width: 100%;
792
1073
  min-width: 0;
793
1074
  min-height: 100%;
1075
+ display: flex;
1076
+ flex-direction: column;
794
1077
  margin: 0;
795
- 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;
796
1079
  }
797
- .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; }
798
1082
  .note-title-input::placeholder { color: color-mix(in srgb, var(--text-tertiary) 62%, transparent); }
799
- .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; }
800
- .note-document-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 14px 0 30px; color: var(--text-tertiary); font-size: 10px; }
801
- .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; }
802
- .note-body-editor::placeholder { color: color-mix(in srgb, var(--text-tertiary) 70%, transparent); }
803
- .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; }
804
1087
  .markdown-preview.is-empty { color: var(--text-tertiary); }
805
1088
  .markdown-preview > :first-child { margin-top: 0; }
806
1089
  .markdown-preview > :last-child { margin-bottom: 0; }
807
1090
  .markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4 { color: var(--text); line-height: 1.3; letter-spacing: -.018em; }
808
- .markdown-preview h1 { margin: 1.8em 0 .65em; font-size: 1.75em; }
809
- .markdown-preview h2 { margin: 1.7em 0 .6em; font-size: 1.4em; }
810
- .markdown-preview h3 { margin: 1.5em 0 .5em; font-size: 1.16em; }
811
- .markdown-preview h4 { margin: 1.35em 0 .45em; font-size: 1em; }
812
- .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; }
813
1096
  .markdown-preview ul, .markdown-preview ol { padding-left: 1.55em; }
814
1097
  .markdown-preview li + li { margin-top: .28em; }
815
1098
  .markdown-preview a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@@ -837,7 +1120,23 @@ html,
837
1120
  .markdown-preview th { color: var(--text); font-weight: 650; }
838
1121
  .markdown-preview hr { height: 1px; margin: 2em 0; border: 0; background: var(--border); }
839
1122
  .markdown-preview img { max-width: 100%; height: auto; border-radius: 10px; }
840
- .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; }
841
1140
  .note-inspector label { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); font-size: 10px; }
842
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; }
843
1142
  .note-meta-select {
@@ -856,7 +1155,7 @@ html,
856
1155
  .note-inspector input:focus, .note-meta-select:focus { border-color: var(--border-strong); background-color: var(--surface); }
857
1156
  .note-tags-field { min-width: 0; flex: 1; }
858
1157
  .note-tags-field input { width: min(100%, 360px); }
859
- .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; }
860
1159
 
861
1160
  @container note-editor (max-width: 700px) {
862
1161
  .note-editor-toolbar {
@@ -873,14 +1172,11 @@ html,
873
1172
  justify-content: flex-start;
874
1173
  }
875
1174
 
876
- .note-mode-switch { margin-right: auto; }
877
1175
  .editor-save-status { margin-left: auto; }
878
1176
  }
879
1177
 
880
1178
  @container note-editor (max-width: 480px) {
881
1179
  .note-breadcrumb { display: none; }
882
- .note-mode-switch { flex: 1 1 112px; }
883
- .note-mode-switch button { min-width: 0; flex: 1; }
884
1180
  .note-editor-actions > .button { flex: 1 1 auto; }
885
1181
  }
886
1182
 
@@ -902,15 +1198,15 @@ html,
902
1198
  .list-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; color: var(--text-tertiary); font-size: 11px; }
903
1199
  .list-actions { display: flex; align-items: flex-start; gap: 4px; }
904
1200
 
905
- .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; }
906
1202
  .badge.accent { background: var(--accent-soft); color: var(--accent); }
907
1203
  .badge.success { background: var(--success-soft); color: var(--success); }
908
1204
  .badge.warning { background: var(--warning-soft); color: var(--warning); }
909
1205
  .badge.danger { background: var(--danger-soft); color: var(--danger); }
910
1206
 
911
1207
  .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
912
- .knowledge-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); padding: 17px; background: var(--surface); }
913
- .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); }
914
1210
  .knowledge-card h3 { margin: 11px 0 7px; font-size: 15px; line-height: 1.4; }
915
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; }
916
1212
  .card-top, .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@@ -920,16 +1216,17 @@ html,
920
1216
  .tag { border-radius: 6px; padding: 2px 7px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; }
921
1217
  .tag.is-empty { color: var(--text-tertiary); font-style: italic; }
922
1218
 
923
- .tabs { display: inline-flex; gap: 3px; border-radius: 10px; padding: 3px; background: var(--surface-soft); }
924
- .tab { min-height: 33px; border: 0; border-radius: 7px; padding: 5px 12px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
925
- .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); }
926
1223
 
927
1224
  .candidate-list { display: grid; gap: 13px; }
928
- .candidate { overflow: hidden; 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; }
929
1226
  .candidate-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px 12px; }
930
1227
  .candidate-header h3 { margin: 8px 0 0; font-size: 15px; }
931
1228
  .candidate-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .34fr); gap: 16px; padding: 0 18px 17px; }
932
- .candidate-change { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
1229
+ .candidate-change { min-width: 0; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 11px; background: var(--material-panel); }
933
1230
  .candidate-change.is-conflict { border-color: color-mix(in srgb, var(--warning) 24%, var(--border)); }
934
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)); }
935
1232
  .candidate-change-heading > div:first-child { min-width: 0; }
@@ -971,20 +1268,42 @@ html,
971
1268
  .candidate-footer small { color: var(--text-tertiary); }
972
1269
  .candidate-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
973
1270
 
974
- .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; }
975
1272
  .empty-state strong { font-size: 15px; }
976
1273
  .empty-state p { max-width: 420px; margin: 7px 0 0; color: var(--text-tertiary); }
977
1274
  .empty-state .button { margin-top: 16px; }
978
1275
 
979
1276
  .loading { display: grid; place-items: center; min-height: 240px; color: var(--text-tertiary); }
980
- .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; }
981
1281
  .skeleton-line, .skeleton-block { position: relative; overflow: hidden; background: var(--surface-soft); }
982
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; }
983
1283
  .skeleton-title { width: min(280px, 48%); height: 22px; border-radius: 7px; }
984
1284
  .skeleton-copy { width: min(460px, 72%); height: 12px; margin-top: 10px; border-radius: 5px; }
985
1285
  .skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
986
- .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); }
987
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); } }
988
1307
 
989
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); }
990
1309
  .error-state p { margin: 0 0 12px; }
@@ -995,7 +1314,7 @@ html,
995
1314
  .token-row strong { display: block; }
996
1315
  .token-row small { color: var(--text-tertiary); }
997
1316
  .permissions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
998
- .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); }
999
1318
  .api-access-heading, .api-access-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
1000
1319
  .api-access-heading strong { font-size: 15px; }
1001
1320
  .api-access-heading p { margin: 4px 0 0; color: var(--text-tertiary); }
@@ -1005,17 +1324,20 @@ html,
1005
1324
  .api-access-actions { align-items: center; border-top: 1px solid var(--border); padding-top: 13px; }
1006
1325
  .api-access-actions small { color: var(--text-tertiary); }
1007
1326
 
1008
- .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; }
1009
1328
  .dialog {
1010
1329
  width: min(100%, 640px);
1011
1330
  max-height: min(88vh, 820px);
1012
1331
  display: flex;
1013
1332
  flex-direction: column;
1014
- border: 1px solid var(--border-strong);
1015
- border-radius: 18px;
1333
+ border: 1px solid var(--panel-border);
1334
+ border-radius: 16px;
1016
1335
  background: var(--dialog-surface);
1017
- 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;
1018
1338
  }
1339
+ @keyframes dialog-backdrop-enter { from { opacity: 0; } }
1340
+ @keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } }
1019
1341
  .dialog.narrow { width: min(100%, 460px); }
1020
1342
  .dialog-backdrop.sheet-backdrop {
1021
1343
  place-items: stretch end;
@@ -1033,11 +1355,11 @@ html,
1033
1355
  animation: sheet-enter .2s cubic-bezier(.2, .8, .2, 1);
1034
1356
  }
1035
1357
  @keyframes sheet-enter { from { opacity: .75; transform: translateX(18px); } }
1036
- .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; }
1037
1359
  .dialog-header h2 { margin: 0; font-size: 17px; }
1038
1360
  .dialog-header p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; }
1039
1361
  .dialog-body { overflow: auto; padding: 20px; }
1040
- .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); }
1041
1363
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
1042
1364
  .form-grid .span-2 { grid-column: 1 / -1; }
1043
1365
  .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@@ -1075,12 +1397,20 @@ html,
1075
1397
  .secret-value code { min-width: 0; flex: 1; overflow-wrap: anywhere; border-radius: 7px; padding: 8px; background: var(--surface); color: var(--text); }
1076
1398
 
1077
1399
  .toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 8px; pointer-events: none; }
1078
- .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); animation: toast-in .18s ease-out; pointer-events: auto; }
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; }
1079
1401
  .toast > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
1080
1402
  .toast-close { flex: none; min-height: 28px; }
1081
1403
  .toast.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
1082
1404
  @keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }
1083
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
+
1084
1414
  @media (max-width: 980px) {
1085
1415
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1086
1416
  .dashboard-grid { grid-template-columns: 1fr; }
@@ -1089,6 +1419,7 @@ html,
1089
1419
  .mount-manager-toolbar .tabs { width: 100%; }
1090
1420
  .note-workspace { grid-template-columns: minmax(210px, 30%) minmax(0, 1fr); }
1091
1421
  .note-paper { padding-inline: clamp(28px, 6cqi, 62px); }
1422
+ .notes-workspace { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
1092
1423
  }
1093
1424
 
1094
1425
  @media (max-width: 1180px) {
@@ -1110,7 +1441,8 @@ html,
1110
1441
 
1111
1442
  @media (max-width: 760px) {
1112
1443
  :root { --sidebar-width: 0px; }
1113
- .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; }
1114
1446
  .app-sidebar-resizer { display: none; }
1115
1447
  .pane-toggle-button[data-pane="main"] { display: none; }
1116
1448
  .pane-toggle-button[data-pane="library"] { display: inline-grid; }
@@ -1123,6 +1455,9 @@ html,
1123
1455
  .topbar h1 { font-size: 17px; }
1124
1456
  .topbar p { display: none; }
1125
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; }
1126
1461
  .workspace-switcher { align-items: stretch; flex-direction: column; gap: 10px; }
1127
1462
  .workspace-switcher-leading { align-items: flex-start; }
1128
1463
  .workspace-switcher p { text-align: left; }
@@ -1157,6 +1492,9 @@ html,
1157
1492
  .document-finalized-banner p { grid-column: 1; }
1158
1493
  .note-title-input { font-size: 26px; }
1159
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; }
1160
1498
  .note-inspector label { justify-content: space-between; }
1161
1499
  .note-tags-field input { width: 100%; }
1162
1500
  .note-format-hint { display: none; }
@@ -1178,9 +1516,11 @@ html,
1178
1516
  .candidate-header, .candidate-footer { align-items: flex-start; flex-direction: column; }
1179
1517
  .candidate-footer { gap: 9px; }
1180
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; }
1181
1522
  .button, .tab, .nav-button, .note-tree-base, .note-tree-document, .note-tree-new { min-height: 44px; }
1182
1523
  .note-add-button, .pane-toggle-button, .mobile-menu { width: 44px; min-width: 44px; min-height: 44px; }
1183
- .note-mode-switch button { min-height: 38px; }
1184
1524
  .toast-region { right: 12px; bottom: 12px; left: 12px; }
1185
1525
  .toast { max-width: none; }
1186
1526
  }
@@ -1223,6 +1563,18 @@ html,
1223
1563
  .diff-column-headings, .diff-line { grid-template-columns: 30px 30px 20px minmax(0, 1fr); }
1224
1564
  .diff-column-headings span, .diff-line-number { padding-inline: 4px; }
1225
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; }
1226
1578
  }
1227
1579
 
1228
1580
  @media (prefers-reduced-motion: reduce) {