@lemoncat7/dsh-knowledge 2.3.2 → 2.3.4

package/web/styles.css

@@ -2,31 +2,6 @@
   color-scheme: light dark;
   font-family: var(--font-ui);
   font-size: 16px;
-  --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei UI", Arial, sans-serif;
-  --font-reading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei UI", Arial, sans-serif;
-  --font-mono: "SFMono-Regular", "Cascadia Code", "Cascadia Mono", Menlo, Consolas, monospace;
-  --bg: #ebebeb;
-  --surface: #f4f4f4;
-  --surface-raised: #fafafa;
-  --surface-soft: #eeeeef;
-  --surface-hover: rgb(118 118 128 / 9%);
-  --dialog-surface: #f4f4f4;
-  --text: #1d1d1f;
-  --text-secondary: #515154;
-  --text-tertiary: #6e6e73;
-  --border: rgb(60 60 67 / 14%);
-  --border-strong: rgb(60 60 67 / 24%);
-  --accent: #3a3a3c;
-  --accent-hover: #1d1d1f;
-  --accent-soft: #e2e2e5;
-  --on-accent: #ffffff;
-  --success: #248a3d;
-  --success-soft: #e8f5eb;
-  --warning: #c93400;
-  --warning-soft: #fff1e8;
-  --danger: #d70015;
-  --danger-soft: #ffebed;
-  --shadow: 0 24px 64px rgb(0 0 0 / 20%);
   --radius: 14px;
   --radius-control: 9px;
   --radius-small: 7px;
@@ -43,87 +18,40 @@
   --surface-canvas: var(--bg);
   --surface-pane: transparent;
   --surface-editor: transparent;
-  --surface-overlay: rgba(246, 247, 250, 0.88);
   --shadow-control: 0 1px 2px rgb(0 0 0 / 5.5%), inset 0 1px 0 rgb(255 255 255 / 58%);
   --shadow-floating: 0 22px 70px color-mix(in srgb, var(--text) 18%, transparent), 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
-  --glass-clear: color-mix(in srgb, var(--surface-raised) 20%, transparent);
   --glass-regular: color-mix(in srgb, var(--surface-raised) 36%, transparent);
-  --glass-thick: color-mix(in srgb, var(--surface-raised) 62%, transparent);
   --glass-border: color-mix(in srgb, var(--border) 58%, transparent);
   --glass-separator: var(--border);
   --glass-rim-light: color-mix(in srgb, var(--surface-raised) 58%, transparent);
   --glass-rim-shadow: color-mix(in srgb, var(--text) 12%, transparent);
   --glass-filter: saturate(1.22) contrast(1.03) blur(32px);
   --glass-shadow: inset 0 1px 0 var(--glass-rim-light), inset 0 -1px 0 var(--glass-rim-shadow), 0 10px 28px rgb(0 0 0 / 8.5%);
-  --liquid-glass-large: color-mix(in srgb, var(--surface) 68%, transparent);
-  --liquid-glass-regular: color-mix(in srgb, var(--surface-raised) 52%, transparent);
-  --liquid-glass-clear: color-mix(in srgb, var(--surface-raised) 36%, transparent);
-  --liquid-glass-dialog: color-mix(in srgb, var(--surface-raised) 76%, transparent);
-  --interaction-glow-core: rgb(67 70 77 / 78%);
-  --interaction-glow-soft: rgb(111 115 124 / 36%);
-  --interaction-glow-haze: rgb(255 255 255 / 72%);
-  --interaction-glare-light: rgb(255 255 255 / 72%);
-  --interaction-glare-rim: rgb(45 48 54 / 12%);
-  --card-highlight: rgb(255 255 255 / 58%);
-  --card-fill: color-mix(in srgb, var(--surface-raised) 48%, transparent);
   --radius-shell: 18px;
   --radius-panel: 12px;
   --motion-fast: 120ms;
   --motion-base: 190ms;
   --motion-slow: 280ms;
   --ease-out: cubic-bezier(.22, 1, .36, 1);
-  --ease-spring: cubic-bezier(.2, .9, .25, 1.04);
   --font-caption: 12px;
   --font-body: 13px;
-  --font-label: 14px;
   --font-title: 18px;
-  --font-heading: 22px;
   --sidebar-width: 214px;
   --chrome-inset: 8px;
-  --topbar-inline-inset: 0px;
   --scrollbar-thumb: color-mix(in srgb, var(--text-tertiary) 42%, transparent);
   --scrollbar-thumb-hover: color-mix(in srgb, var(--text-secondary) 58%, transparent);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-color-scheme]) {
-    --bg: #101719;
-    --surface: #182022;
-    --surface-raised: #20292b;
-    --surface-soft: rgb(255 255 255 / 6%);
-    --surface-hover: rgb(255 255 255 / 7.5%);
-    --dialog-surface: #20292b;
-    --text: #e3eaeb;
-    --text-secondary: #bbc9cc;
-    --text-tertiary: #95a7ab;
-    --border: rgb(184 204 205 / 10%);
-    --border-strong: rgb(184 204 205 / 18%);
-    --accent: #69b6ba;
-    --accent-hover: #8aced0;
-    --accent-soft: rgb(105 182 186 / 13%);
-    --on-accent: #101819;
-    --success: #30d158;
-    --success-soft: rgb(48 209 88 / 13%);
-    --warning: #ff9f0a;
-    --warning-soft: rgb(255 159 10 / 13%);
-    --danger: #ff453a;
-    --danger-soft: rgb(255 69 58 / 14%);
-    --shadow: 0 28px 72px rgb(0 0 0 / 48%);
     --surface-highlight: rgb(255 255 255 / 11%);
     --shadow-soft: 0 1px 2px rgb(0 0 0 / 28%);
     --shadow-panel: 0 2px 7px rgb(0 0 0 / 20%), 0 14px 36px rgb(0 0 0 / 28%);
     --shadow-control: 0 1px 2px rgb(0 0 0 / 28%), 0 5px 16px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 11%);
     --shadow-floating: 0 24px 72px rgb(0 0 0 / 52%), 0 2px 8px rgb(0 0 0 / 28%);
     --glass-shadow: inset 0 1px 0 var(--glass-rim-light), inset 0 -1px 0 var(--glass-rim-shadow), 0 12px 32px rgb(0 0 0 / 30%);
-    --interaction-glow-core: rgb(244 244 247 / 78%);
-    --interaction-glow-soft: rgb(197 199 205 / 34%);
-    --interaction-glow-haze: rgb(255 255 255 / 42%);
-    --interaction-glare-light: rgb(255 255 255 / 34%);
-    --interaction-glare-rim: rgb(255 255 255 / 10%);
     --glass-rim-light: rgb(255 255 255 / 18%);
     --glass-rim-shadow: rgb(0 0 0 / 30%);
-    --card-highlight: rgb(255 255 255 / 11%);
-    --card-fill: rgb(7 9 11 / 22%);
     --workspace-glass-surface: rgb(25 33 35 / 90%);
     --material-toolbar: transparent;
     --material-panel: rgb(32 41 43 / 58%);
@@ -131,7 +59,6 @@
     --material-control-hover: rgb(39 50 53 / 84%);
     --surface-pane: transparent;
     --surface-editor: transparent;
-    --surface-overlay: rgb(25 33 35 / 94%);
   }
 }
 
@@ -144,13 +71,6 @@
   --shadow-control: 0 1px 2px rgb(0 0 0 / 28%), 0 5px 16px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 11%);
   --shadow-floating: 0 24px 72px rgb(0 0 0 / 52%), 0 2px 8px rgb(0 0 0 / 28%);
   --glass-shadow: inset 0 1px 0 var(--glass-rim-light), inset 0 -1px 0 var(--glass-rim-shadow), 0 12px 32px rgb(0 0 0 / 30%);
-  --interaction-glow-core: rgb(244 244 247 / 78%);
-  --interaction-glow-soft: rgb(197 199 205 / 34%);
-  --interaction-glow-haze: rgb(255 255 255 / 42%);
-  --interaction-glare-light: rgb(255 255 255 / 34%);
-  --interaction-glare-rim: rgb(255 255 255 / 10%);
-  --card-highlight: rgb(255 255 255 / 11%);
-  --card-fill: rgb(7 9 11 / 22%);
   --workspace-glass-surface: rgb(25 33 35 / 90%);
   --material-toolbar: transparent;
   --material-panel: rgb(32 41 43 / 58%);
@@ -158,7 +78,6 @@
   --material-control-hover: rgb(39 50 53 / 84%);
   --surface-pane: transparent;
   --surface-editor: transparent;
-  --surface-overlay: rgb(25 33 35 / 94%);
 }
 
 * { box-sizing: border-box; }
@@ -183,13 +102,9 @@ body {
 /* The workspace and iframe remain transparent. Only the visible sidebar and
    main pane own material, preventing a full-page glass sheet. */
 :root[data-dsh-embed-mode="embedded"] {
-  --workspace-glass-surface: rgba(255, 255, 255, 0.08);
-  --glass-filter: saturate(.65) contrast(1.015) blur(24px);
-}
-
-:root[data-dsh-embed-mode="embedded"][data-color-scheme="dark"] {
-  --workspace-glass-surface: rgb(16 23 25 / 18%);
-  --glass-filter: saturate(.55) contrast(1.02) blur(24px);
+  --workspace-glass-surface: var(--knowledge-embedded-surface);
+  --glass-filter: var(--knowledge-embedded-filter);
+  --material-control: var(--knowledge-embedded-control);
 }
 
 :root[data-dsh-embed-mode="embedded"],
@@ -282,7 +197,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
 
 button:disabled { cursor: not-allowed; opacity: .56; }
 
-::selection { background: var(--accent-soft); color: var(--text); }
+::selection { background: var(--selection-background); color: var(--selection-text); }
 
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
@@ -393,7 +308,7 @@ html,
   background-color: var(--material-control);
   color: var(--text);
   box-shadow: var(--shadow-control);
-  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease, transform var(--motion-fast) var(--ease-out);
+  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
 }
 
 .input, .select { height: 38px; min-height: 38px; font: inherit; line-height: 20px; }
@@ -411,6 +326,18 @@ html,
   background-repeat: no-repeat;
 }
 .select option { background: var(--dialog-surface); color: var(--text); }
+.knowledge-select { display: inline-flex; min-width: 0; width: 100%; vertical-align: middle; }
+.knowledge-select-source { display: none !important; }
+.knowledge-select-trigger { display: block; min-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
+.knowledge-select-trigger[aria-invalid="true"] { border-color: var(--danger); outline: 2px solid var(--danger); outline-offset: 2px; }
+.knowledge-select-menu { position: fixed; z-index: 1200; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 4px; background: var(--dialog-surface); color: var(--text); box-shadow: var(--shadow-floating); scrollbar-width: thin; }
+.knowledge-select-option { display: block; width: 100%; min-height: 36px; border: 0; border-radius: var(--radius-small); padding: 8px 10px; background: transparent; color: var(--text); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
+.knowledge-select-option:hover, .knowledge-select-option:focus-visible { background: var(--surface-hover); outline-offset: -2px; }
+.knowledge-select-option[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.knowledge-select-empty { margin: 0; padding: 10px; color: var(--text-secondary); }
+.toolbar > .knowledge-select, .mount-manager-toolbar > .knowledge-select { width: auto; min-width: 132px; }
+.app-sidebar-scrim[hidden] { display: none; }
+@media (pointer: coarse) { .knowledge-select-option { min-height: 44px; } }
 .textarea { min-height: 132px; resize: vertical; }
 .input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
 .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 72%, var(--border)); background-color: var(--material-control-hover); }
@@ -428,11 +355,11 @@ html,
   font-weight: 590;
   white-space: nowrap;
   box-shadow: var(--shadow-control);
-  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);
+  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
 }
 
-.button:hover:not(:disabled) { background: var(--material-control-hover); border-color: var(--border-strong); box-shadow: 0 6px 16px rgb(31 31 35 / 8%); transform: translateY(-1px); }
-.button:active:not(:disabled) { box-shadow: var(--shadow-control); transform: translateY(0) scale(.98); }
+.button:hover:not(:disabled) { background: var(--material-control-hover); border-color: var(--border-strong); }
+.button:active:not(:disabled) { border-color: var(--text-secondary); }
 .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); }
 .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); }
 .button.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
@@ -452,7 +379,6 @@ html,
   align-items: start;
   overflow: hidden;
   background: transparent;
-  transition: grid-template-columns 230ms var(--ease-out);
 }
 
 .sidebar {
@@ -474,10 +400,6 @@ html,
   box-shadow: inset 0 1px 0 var(--surface-highlight), var(--shadow-soft);
   -webkit-backdrop-filter: var(--glass-filter);
   backdrop-filter: var(--glass-filter);
-  transform-origin: left center;
-  transition:
-    opacity 150ms ease-out,
-    transform 230ms var(--ease-out);
 }
 
 .brand { display: flex; align-items: center; gap: 11px; min-height: 56px; margin-bottom: 8px; padding: 3px 8px 12px; border-bottom: 1px solid var(--separator); }
@@ -519,10 +441,10 @@ html,
   text-align: left;
   font-size: 13px;
   font-weight: 520;
-  transition: background var(--motion-base) ease, color var(--motion-fast) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--ease-out);
+  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
 }
 .nav-button:hover { background: var(--surface-hover); color: var(--text); }
-.nav-button:active { transform: scale(.97); }
+.nav-button:active { background: var(--material-control); }
 .nav-button[aria-current="page"] { background: var(--material-control); color: var(--text); font-weight: 640; box-shadow: var(--shadow-control); }
 .nav-button[aria-current="page"]::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -1px; width: 2px; border-radius: 2px; background: var(--text-secondary); opacity: .72; }
 .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; }
@@ -549,10 +471,7 @@ html,
   touch-action: none;
   background: transparent;
   outline-offset: -2px;
-  transition:
-    opacity 130ms ease-out,
-    transform 210ms var(--ease-out),
-    background-color var(--motion-fast) ease;
+  transition: background-color var(--motion-fast) ease;
 }
 .app-sidebar-resizer::before {
   content: "";
@@ -627,7 +546,7 @@ html,
 .topbar-heading { min-width: 0; }
 .topbar-kicker { display: block; margin-bottom: 2px; color: var(--text-tertiary); font: 8px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; letter-spacing: .12em; }
 .route-progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--accent) 7%, transparent); }
-.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); }
+.route-progress span { display: block; width: 100%; height: 100%; border-radius: 0 99px 99px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 58%, transparent), var(--accent)); transform: scaleX(var(--route-progress)); transform-origin: left center; transition: transform var(--motion-fast) ease-out; }
 .mobile-menu, .app-sidebar-scrim { display: none; }
 .topbar-actions { display: flex; align-items: center; gap: 8px; }
 .pane-toggle-group {
@@ -732,10 +651,7 @@ html,
 .candidate-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
 
 .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
-.metric { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-panel); padding: 18px; background: var(--material-panel); 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); }
-.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; }
-.metric:hover { border-color: var(--border-strong); box-shadow: var(--shadow-panel); transform: translateY(-2px); }
-.metric:hover::after { opacity: 1; }
+.metric { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-panel); padding: 18px; background: var(--material-panel); box-shadow: var(--shadow-control); }
 .metric-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
 .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; }
 .metric-detail { margin-top: 7px; color: var(--text-tertiary); font-size: 11px; }
@@ -811,12 +727,12 @@ html,
   padding: 16px;
   background: var(--material-panel);
   box-shadow: inset 0 1px 0 var(--surface-highlight), var(--shadow-soft);
-  transition: background .16s ease, border-color .16s ease, box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
+  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
   content-visibility: auto;
   contain-intrinsic-size: auto 218px;
 }
 .base-card::after { position: absolute; top: 0; right: 18px; left: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--surface-highlight), transparent); pointer-events: none; content: ''; }
-.base-card:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-raised) 92%, var(--surface-hover)); box-shadow: inset 0 1px 0 var(--surface-highlight), var(--shadow-panel); transform: translateY(-1px); }
+.base-card:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-raised) 92%, var(--surface-hover)); }
 .base-card.is-archived { opacity: .78; }
 .base-card-header { min-width: 0; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .base-card-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
@@ -918,11 +834,9 @@ html,
 }
 .note-tree-group + .note-tree-group { margin-top: 3px; }
 .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; }
-.note-tree-base { position: relative; 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), box-shadow var(--motion-fast) ease; }
-.note-tree-base:hover, .note-tree-document:hover, .note-tree-new:hover { background: var(--surface-hover); color: var(--text); transform: translateX(2px); }
-.note-tree-group[data-drop-target="true"] > .note-tree-base { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent), var(--shadow-control); transform: translateX(2px); }
+.note-tree-base { position: relative; 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; }
+.note-tree-base:hover, .note-tree-document:hover, .note-tree-new:hover { background: var(--surface-hover); color: var(--text); }
 .note-tree-group[data-drop-target="true"] > .note-tree-base .tree-count { visibility: hidden; }
-.note-tree-group[data-drop-target="true"] > .note-tree-base::after { content: "移动到这里"; position: absolute; right: 7px; border-radius: 5px; padding: 2px 6px; background: var(--surface-raised); color: var(--accent); font-size: 9px; font-weight: 650; pointer-events: none; }
 .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; }
 .note-tree-group[data-expanded="true"] .tree-disclosure { transform: rotate(45deg) translate(-1px, -1px); }
 .tree-folder-icon {
@@ -940,12 +854,9 @@ html,
 .tree-base-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tree-count { min-width: 20px; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
 .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); }
-.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; }
-.note-tree-document[draggable="true"] { cursor: grab; }
-.note-tree-document[draggable="true"]:active { cursor: grabbing; }
-.note-tree-document[data-dragging="true"] { opacity: .42; transform: translateX(5px) scale(.985); }
+.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; }
 .note-tree-document[aria-busy="true"] { opacity: .58; pointer-events: none; }
-.note-tree-document[aria-current="page"] { background: var(--material-control); color: var(--text); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--text-secondary) 74%, transparent), var(--shadow-control); transform: translateX(2px); }
+.note-tree-document[aria-current="page"] { background: var(--material-control); color: var(--text); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--text-secondary) 74%, transparent), var(--shadow-control); }
 .tree-document-icon {
   width: 14px;
   height: 17px;
@@ -983,6 +894,7 @@ html,
   overflow: hidden;
   background: transparent;
 }
+.notes-browser-scrim { display: none; }
 .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(--glass-separator); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
 .notes-browser-header { min-height: 68px; display: grid; gap: 8px; padding: 10px 10px 7px; }
 .notes-browser-header > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
@@ -1011,14 +923,17 @@ html,
 .notes-tree-branch[role="group"] { position: relative; margin-left: 17px; padding-left: 5px; }
 .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); }
 .notes-tree-node { min-width: 0; max-width: 100%; }
-.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); }
+.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; }
 .notes-tree-item:hover { background: var(--surface-hover); }
-.notes-tree-item[data-selected="true"] { background: var(--material-control); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--text-secondary) 70%, transparent), var(--shadow-control); transform: translateX(2px); }
-.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; }
-.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; }
+.notes-tree-item[data-selected="true"] { background: var(--material-control); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--text-secondary) 70%, transparent), var(--shadow-control); }
+.notes-tree-item[data-drop-target="true"],
+.note-tree-group[data-drop-target="true"] > .note-tree-base { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); outline: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset: -1px; }
+.notes-tree-item[data-drop-target="true"]::after,
+.note-tree-group[data-drop-target="true"] > .note-tree-base::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; }
+.note-tree-group[data-drop-target="true"] > .note-tree-base::after { content: "移入此知识库"; }
 .notes-tree-item[data-drop-target="true"] .notes-row-actions { opacity: 0; pointer-events: none; }
-.notes-tree-item[data-dragging="true"] { opacity: .45; }
-.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; }
+.notes-tree-item[data-dragging="true"], .note-tree-document[data-dragging="true"] { opacity: .45; }
+.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; }
 .notes-tree-row:hover, .notes-tree-row[aria-selected="true"] { color: var(--text); }
 .notes-tree-chevron, .notes-tree-spacer { position: relative; width: 14px; height: 20px; flex: none; color: var(--text-tertiary); }
 .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; }
@@ -1120,9 +1035,9 @@ html,
 .notes-content.is-document, .notes-content.is-file { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
 .notes-content.is-document { --notes-document-inline: clamp(24px, 4.5vw, 76px); background: transparent; }
 .notes-content.is-document.has-line-numbers { --notes-document-inline: clamp(34px, 3.2vw, 48px); }
-.notes-editor-frame { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 0; overflow: hidden; }
+.notes-editor-frame { position: relative; isolation: isolate; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 0; overflow: hidden; }
 .notes-editor-frame[data-outline-open="true"] { grid-template-columns: minmax(0, 1fr) minmax(190px, 236px); }
-.notes-document-toolbar { position: relative; 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: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
+.notes-document-toolbar { position: relative; z-index: 2; min-width: 0; 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: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
 .notes-toolbar-leading { min-width: 0; display: flex; flex: 1 1 auto; align-items: center; overflow: hidden; }
 .notes-file-info { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(130px, 1fr) minmax(90px, .7fr) minmax(180px, 1.2fr); align-items: center; gap: 8px 18px; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; }
 .notes-file-info-item { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; gap: 6px; }
@@ -1134,7 +1049,7 @@ html,
 .notes-save-state[data-dirty="true"] { color: var(--warning); }
 .notes-outline-action { display: inline-flex; align-items: center; gap: 6px; }
 .notes-toolbar-action-icon { width: 16px; height: 16px; display: block; flex: none; color: currentColor; stroke-width: 2; }
-.notes-document-more { position: relative; display: none; flex: none; }
+.notes-document-more { position: relative; display: block; flex: none; }
 .notes-document-more > summary { width: 44px; min-width: 44px; display: inline-grid; place-items: center; list-style: none; padding: 0; color: var(--text); user-select: none; }
 .notes-document-more > summary::-webkit-details-marker { display: none; }
 .notes-document-more > summary:hover, .notes-document-more[open] > summary { background: var(--surface-hover); color: var(--text); }
@@ -1145,35 +1060,45 @@ html,
   right: 0;
   z-index: 24;
   width: min(230px, calc(100vw - 16px));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 2px;
   border: 1px solid var(--panel-border);
   border-radius: 12px;
   padding: 6px;
-  background: var(--dialog-surface);
-  box-shadow: var(--shadow-floating);
+  background: var(--menu-surface-solid);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 14%), 0 1px 4px rgb(0 0 0 / 8%);
+}
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .notes-document-more-menu {
+    background: var(--menu-surface);
+    -webkit-backdrop-filter: var(--knowledge-embedded-filter);
+    backdrop-filter: var(--knowledge-embedded-filter);
+  }
 }
-.notes-document-more-menu::before {
-  position: absolute;
-  top: -5px;
-  right: 17px;
-  width: 8px;
-  height: 8px;
-  border-top: 1px solid var(--panel-border);
-  border-left: 1px solid var(--panel-border);
-  background: var(--dialog-surface);
-  content: "";
-  transform: rotate(45deg);
+@media (prefers-reduced-transparency: reduce), (pointer: coarse), (max-width: 760px) {
+  .notes-document-more-menu {
+    background: var(--menu-surface-solid);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
 }
 .notes-document-more:not([open]) > .notes-document-more-menu { display: none; }
 .notes-document-more-menu .button { min-width: 0; width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; justify-content: stretch; gap: 10px; border-color: transparent; padding: 8px 10px; box-shadow: none; text-align: left; }
-.notes-document-more-menu .button:hover:not(:disabled) { border-color: transparent; background: var(--surface-hover); box-shadow: none; transform: none; }
+.notes-document-more-menu .button:hover:not(:disabled) { border-color: transparent; background: var(--surface-hover); box-shadow: none; }
+.notes-document-more-menu .button:focus-visible { outline-offset: -2px; background: var(--surface-hover); }
+.notes-document-more-menu .is-danger :is(.notes-document-menu-icon, .notes-document-menu-label) { color: var(--danger); }
+.notes-document-more-menu .is-danger:hover { background: var(--danger-soft); }
 .notes-document-menu-icon { width: 18px; height: 18px; display: block; color: var(--text); stroke-width: 2; }
 .notes-document-menu-label { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
 .notes-document-menu-divider { height: 1px; margin: 4px 7px; background: var(--separator); }
 .notes-document-scroll { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
 .notes-document-scroll { scroll-padding-block: 72px 48px; }
+/* Tint only the reading area; retain the surrounding pane's existing frost. */
+.notes-document-scroll, .note-editor-scroll { background: var(--document-surface); }
 .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); }
 .notes-document-title:focus, .notes-document-title:focus-visible { outline: 0; box-shadow: none; }
 .notes-document-scroll > .notes-live-editor, .notes-document-scroll > .notes-plain-editor { width: 100%; min-width: 0; min-height: max(520px, calc(100% - 74px)); margin-top: 0; padding: 16px var(--notes-document-inline) 72px; }
@@ -1184,7 +1109,6 @@ html,
 .notes-plain-editor-surface:focus, .notes-plain-editor-surface:focus-visible { border: 0; outline: 0; box-shadow: none; }
 .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; }
 .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; }
-.notes-plain-editor-surface ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
 .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); }
 .notes-live-editor-surface p.is-editor-empty:first-child::before { height: 0; float: left; color: var(--text-tertiary); content: attr(data-placeholder); pointer-events: none; }
 .notes-live-editor-surface:focus, .notes-live-editor-surface:focus-visible { border: 0; outline: 0; box-shadow: none; }
@@ -1230,7 +1154,7 @@ html,
 .notes-find-input, .notes-selection-link-input { box-sizing: border-box; min-width: 0; height: 34px; border: 1px solid var(--panel-border); border-radius: 7px; padding: 6px 9px; background: var(--material-control); color: var(--text); font: inherit; font-size: 12px; box-shadow: var(--shadow-control); }
 .notes-find-input:focus, .notes-selection-link-input:focus { border-color: var(--border-strong); outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); outline-offset: 1px; }
 .notes-find-status { min-width: 48px; color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
-.notes-find-button, .notes-selection-control { min-height: 34px; border: 0; border-radius: 7px; padding: 5px 8px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 590; white-space: nowrap; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
+.notes-find-button, .notes-selection-control { min-height: 34px; border: 0; border-radius: 7px; padding: 5px 8px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 590; white-space: nowrap; transition: background var(--motion-fast) ease, color var(--motion-fast) ease; }
 .notes-find-button:hover:not(:disabled), .notes-selection-control:hover { background: var(--surface-hover); color: var(--text); }
 .notes-find-button[aria-pressed="true"], .notes-selection-control[aria-pressed="true"], .notes-selection-control[aria-checked="true"] { background: var(--material-control); color: var(--accent); box-shadow: var(--shadow-control); }
 .notes-find-button:disabled { opacity: .42; }
@@ -1271,7 +1195,7 @@ html,
 .note-history-timeline-heading strong { font-size: 12px; font-weight: 650; }
 .note-history-timeline-heading span { color: var(--text-tertiary); font-size: 10px; }
 .note-history-version-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px; }
-.note-history-version { width: 100%; min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 2px 7px; border: 0; border-radius: 8px; padding: 8px 9px; background: transparent; color: var(--text); text-align: left; transition: background var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
+.note-history-version { width: 100%; min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 2px 7px; border: 0; border-radius: 8px; padding: 8px 9px; background: transparent; color: var(--text); text-align: left; transition: background var(--motion-fast) ease; }
 .note-history-version:hover { background: var(--surface-hover); }
 .note-history-version[aria-current="true"] { background: var(--material-control); box-shadow: inset 2px 0 0 var(--accent), var(--shadow-control); }
 .note-history-version strong { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }
@@ -1345,7 +1269,7 @@ html,
 .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); }
 .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); }
 .notes-transfer[data-state="error"] .notes-transfer-detail { color: var(--danger); white-space: normal; }
-@keyframes notes-transfer-enter { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes notes-transfer-enter { from { opacity: 0; } to { opacity: 1; } }
 @keyframes notes-transfer-scan { from { transform: translateX(-115%); } to { transform: translateX(295%); } }
 .note-picker { display: grid; gap: 12px; }
 .note-picker-results { max-height: min(58vh, 540px); overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
@@ -1398,7 +1322,7 @@ html,
 .note-toolbar-meta { display: inline-flex; gap: 10px; margin-left: 8px; color: var(--text-tertiary); font-size: 10px; }
 .note-toolbar-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .note-toolbar-meta > span + span::before { content: "·"; margin-right: 10px; color: var(--border-strong); }
-.note-editor-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
+.note-editor-actions { min-width: 0; display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 6px; }
 .editor-save-status { margin-right: 4px; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
 .note-editor-scroll {
   min-height: 0;
@@ -1494,6 +1418,8 @@ html,
 .document-reference-empty { color: var(--text-tertiary); font-size: 12px; }
 .document-reference-add { min-height: 27px; white-space: nowrap; }
 .note-inspector label { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); font-size: 10px; }
+.note-inspector label > span:not(.knowledge-select) { flex: none; white-space: nowrap; }
+.note-inspector .knowledge-select { width: auto; flex: none; }
 .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; }
 .note-meta-select {
   -webkit-appearance: none;
@@ -1510,30 +1436,19 @@ html,
 }
 .note-inspector input:focus, .note-meta-select:focus { border-color: var(--border-strong); background-color: var(--surface); }
 .note-tags-field { min-width: 0; flex: 1; }
-.note-tags-field input { width: min(100%, 360px); }
+.note-tags-field input { width: min(100%, 360px); min-width: 0; }
 .note-format-hint { margin-left: auto; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
 
-@container note-editor (max-width: 700px) {
-  .note-editor-toolbar {
-    min-height: 0;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    align-items: stretch;
-    gap: 7px;
-    padding: 9px 12px;
-  }
-
-  .note-editor-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .editor-save-status { margin-left: auto; }
+@container note-editor (max-width: 920px) {
+  .note-toolbar-meta { display: none; }
+  .note-editor-toolbar { gap: 8px; padding-inline: 10px; }
 }
 
 @container note-editor (max-width: 480px) {
-  .note-breadcrumb { display: none; }
-  .note-editor-actions > .button { flex: 1 1 auto; }
+  .note-breadcrumb { flex: 1; }
+  .note-breadcrumb > span { display: none; }
+  .note-editor-actions { gap: 4px; }
+  .note-editor-actions > .badge { display: none; }
 }
 
 .list { display: grid; gap: 8px; }
@@ -1562,7 +1477,7 @@ html,
 
 .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .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); }
-.knowledge-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-panel); }
+.knowledge-card:hover { border-color: var(--border-strong); }
 .knowledge-card h3 { margin: 11px 0 7px; font-size: 15px; line-height: 1.4; }
 .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; }
 .card-top, .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@@ -1573,8 +1488,8 @@ html,
 .tag.is-empty { color: var(--text-tertiary); font-style: italic; }
 
 .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); }
-.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); }
-.tab:hover { color: var(--text); transform: translateY(-1px); }
+.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-color var(--motion-fast) ease; }
+.tab:hover { color: var(--text); background: var(--surface-hover); }
 .tab[aria-selected="true"] { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-soft); }
 
 .candidate-list { display: grid; gap: 13px; }
@@ -1651,7 +1566,6 @@ html,
 .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; }
 .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; }
 .skeleton-line, .skeleton-block { position: relative; overflow: hidden; background: var(--surface-soft); }
-.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; }
 .skeleton-title { width: min(280px, 48%); height: 22px; border-radius: 7px; }
 .skeleton-copy { width: min(460px, 72%); height: 12px; margin-top: 10px; border-radius: 5px; }
 .skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
@@ -1674,8 +1588,7 @@ html,
 .skeleton-list-row .skeleton-line { width: 66%; height: 12px; border-radius: 5px; }
 .notes-selection-loading { overflow: hidden; }
 .notes-selection-skeleton { display: grid; align-content: start; gap: 15px; padding: clamp(34px, 5vw, 72px); }
-@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
-@keyframes loading-pulse { 0%, 100% { opacity: .5; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
+@keyframes loading-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
 
 .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); }
 .error-state p { margin: 0 0 12px; }
@@ -1696,7 +1609,7 @@ html,
 .api-access-actions { align-items: center; border-top: 1px solid var(--border); padding-top: 13px; }
 .api-access-actions small { color: var(--text-tertiary); }
 
-.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: transparent; animation: dialog-backdrop-enter var(--motion-base) ease both; }
+.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: transparent; }
 .dialog {
   width: min(560px, 100%);
   max-height: min(680px, calc(100dvh - 64px));
@@ -1707,10 +1620,9 @@ html,
   border-radius: 16px;
   background: var(--dialog-surface);
   box-shadow: 0 22px 58px color-mix(in srgb, #000 18%, transparent), 0 4px 14px color-mix(in srgb, #000 8%, transparent), inset 0 1px 0 var(--surface-highlight);
-  animation: dialog-enter 200ms var(--ease-out) both;
+  animation: dialog-enter var(--motion-fast) ease-out both;
 }
-@keyframes dialog-backdrop-enter { from { opacity: 0; } }
-@keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } }
+@keyframes dialog-enter { from { opacity: 0; } }
 .dialog.narrow { width: min(100%, 460px); }
 .dialog-backdrop.sheet-backdrop {
   place-items: stretch end;
@@ -1724,9 +1636,8 @@ html,
   border-width: 0 0 0 1px;
   border-radius: 0;
   box-shadow: -22px 0 64px rgb(0 0 0 / 18%);
-  animation: sheet-enter .2s cubic-bezier(.2, .8, .2, 1);
+  animation: dialog-enter var(--motion-fast) ease-out both;
 }
-@keyframes sheet-enter { from { opacity: .75; transform: translateX(18px); } }
 .dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--separator); padding: 22px 22px 18px; background: var(--surface-raised); }
 .dialog-header h2 { margin: 0; font-size: var(--font-title); font-weight: 650; letter-spacing: -.02em; }
 .dialog-header p { margin: 4px 0 0; color: var(--text-tertiary); font-size: var(--font-caption); }
@@ -1774,7 +1685,7 @@ html,
 .toast > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
 .toast-close { flex: none; min-height: 28px; }
 .toast.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
-@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }
+@keyframes toast-in { from { opacity: 0; } }
 
 @media (prefers-reduced-transparency: reduce) {
   .sidebar, .main, .topbar, .note-tree-panel, .notes-browser, .notes-content-header, .notes-document-toolbar, .notes-document-statusbar, .note-editor-toolbar, .dialog-backdrop {
@@ -1796,11 +1707,11 @@ html,
   .notes-workspace { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
 }
 
-@media (min-width: 761px) {
+@media (min-width: 1121px) and (hover: hover), (min-width: 1401px) {
   .app-shell[data-sidebar-hidden="true"] { grid-template-columns: 0 0 minmax(0, 1fr); }
   .app-shell[data-sidebar-hidden="true"] > .sidebar {
     opacity: 0;
-    transform: translateX(calc(-100% - var(--chrome-inset))) scale(.985);
+    transform: translateX(calc(-100% - var(--chrome-inset)));
     pointer-events: none;
   }
   .app-shell[data-sidebar-hidden="true"] > .app-sidebar-resizer {
@@ -1810,29 +1721,51 @@ html,
   }
 }
 
-@media (max-width: 760px) {
+@media (max-width: 1120px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
   :root { --sidebar-width: 0px; --chrome-inset: 8px; --topbar-inline-inset: 8px; }
   html { min-width: 0; overflow-x: hidden; }
   body { min-width: 0; overflow-x: hidden; font-size: 14px; }
-  .app-shell { height: auto; min-height: 100dvh; display: block; overflow: visible; }
-  .main { width: 100%; height: auto; min-height: 100dvh; margin: 0; overflow: visible; border: 0; border-radius: 0; }
+  .app-shell { height: auto; min-height: 100svh; min-height: 100dvh; display: block; overflow: visible; }
+  .main { width: 100%; height: auto; min-height: 100svh; min-height: 100dvh; margin: 0; overflow: visible; border: 0; border-radius: 0; }
   .app-sidebar-resizer { display: none; }
   .pane-toggle-button[data-pane="main"] { display: none; }
   .pane-toggle-button[data-pane="library"] { display: inline-grid; }
-  .sidebar { position: fixed; top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); z-index: 40; width: min(82vw, 270px); height: auto; margin-left: max(8px, env(safe-area-inset-left)); border-radius: 18px; transform: translateX(-110%); box-shadow: var(--shadow); transition: transform .2s ease; }
+  .sidebar {
+    position: fixed;
+    top: max(8px, env(safe-area-inset-top));
+    bottom: max(8px, env(safe-area-inset-bottom));
+    z-index: 40;
+    width: min(82vw, 270px);
+    height: auto;
+    margin-left: max(8px, env(safe-area-inset-left));
+    border-radius: 18px;
+    background: var(--surface);
+    box-shadow: var(--shadow);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    transform: translateX(-110%);
+    transition: transform .2s ease;
+  }
   .app-shell[data-menu-open="true"] .sidebar { transform: translateX(0); }
   .app-sidebar-scrim { position: fixed; inset: 0; z-index: 30; display: block; border: 0; padding: 0; background: rgb(0 0 0 / 35%); touch-action: manipulation; }
   .mobile-menu { display: inline-grid; place-items: center; }
-  .topbar { min-height: 64px; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
-  .topbar-title { gap: 10px; }
+  .topbar { min-height: 64px; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
+  .topbar-title { width: 100%; min-width: 0; gap: 8px; }
+  .topbar-heading { min-width: 0; flex: 1 1 auto; }
   .topbar h1 { font-size: 17px; }
   .topbar p { display: none; }
   .page { padding: 22px max(16px, env(safe-area-inset-right)) max(42px, calc(24px + env(safe-area-inset-bottom))) max(16px, env(safe-area-inset-left)); }
-  .app-shell[data-view="notes"] .main { height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
+  .app-shell[data-view="notes"] .main,
+  .app-shell[data-view="entries"] .main { height: 100svh; height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
   .app-shell[data-view="notes"] .topbar { position: relative; }
-  .app-shell[data-view="notes"] .page { height: auto; min-height: 0; overflow: hidden; padding: 0; }
+  .app-shell[data-view="notes"] .page,
+  .app-shell[data-view="entries"] .page { height: auto; min-height: 0; overflow: hidden; }
+  .app-shell[data-view="notes"] .page { padding: 0; }
+  .app-shell[data-view="entries"] .page { padding: 10px max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
   .app-shell[data-view="notes"] .view-stage,
-  .app-shell[data-view="notes"] .notes-page { height: 100%; min-height: 0; overflow: hidden; }
+  .app-shell[data-view="notes"] .notes-page,
+  .app-shell[data-view="entries"] .view-stage { height: 100%; min-height: 0; overflow: hidden; }
+  .app-shell[data-view="entries"] .note-workspace { height: 100%; min-height: 0; }
   .workspace-switcher { align-items: stretch; flex-direction: column; gap: 10px; }
   .workspace-switcher-leading { align-items: flex-start; }
   .workspace-switcher p { text-align: left; }
@@ -1853,7 +1786,10 @@ html,
     z-index: 4;
     width: min(82%, 300px);
     border-right-color: var(--border-strong);
+    background: var(--surface);
     box-shadow: 16px 0 36px color-mix(in srgb, var(--text) 14%, transparent);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
     transform: translateX(-104%);
     transition: transform .18s cubic-bezier(.2, .8, .2, 1);
   }
@@ -1894,11 +1830,30 @@ html,
   .candidate-heading-actions > .button { width: 100%; }
   .candidate-footer { gap: 9px; }
   .candidate-actions { width: 100%; justify-content: flex-start; }
-  .notes-workspace { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
-  .notes-browser { display: none; }
-  .notes-content { min-height: 0; }
+  .notes-workspace { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); isolation: isolate; }
+  .notes-browser {
+    position: absolute;
+    inset: 0 auto 0 0;
+    z-index: 16;
+    width: min(88vw, 320px);
+    display: grid;
+    border-right-color: var(--glass-border);
+    background: var(--surface);
+    box-shadow: 16px 0 36px color-mix(in srgb, var(--text) 14%, transparent), inset 0 1px 0 var(--surface-highlight);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    transform: translateX(-104%);
+    visibility: hidden;
+    transition: transform var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base);
+  }
+  .notes-workspace[data-browser-open="true"] .notes-browser { transform: translateX(0); visibility: visible; transition-delay: 0s; }
+  .notes-browser-scrim { position: absolute; inset: 0; z-index: 15; display: block; border: 0; padding: 0; background: color-mix(in srgb, var(--text) 18%, transparent); touch-action: manipulation; }
+  .notes-browser-header { padding-top: max(12px, env(safe-area-inset-top)); }
+  .notes-tree { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
+  .notes-content { height: 100%; min-height: 0; }
+  .notes-content.is-folder { overflow-y: auto; overscroll-behavior: contain; }
   .notes-editor-frame, .notes-editor-frame[data-outline-open="true"] { grid-template-columns: minmax(0, 1fr); }
-  .notes-editor-outline { position: absolute; inset: 0 0 0 auto; z-index: 12; width: min(86vw, 300px); border-left-color: var(--border-strong); box-shadow: -16px 0 34px color-mix(in srgb, var(--text) 13%, transparent); transform: translateX(103%); transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-out); }
+  .notes-editor-outline { position: absolute; inset: 0 0 0 auto; z-index: 12; width: min(86vw, 300px); border-left-color: var(--border-strong); background: var(--dialog-surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: -16px 0 34px color-mix(in srgb, var(--text) 13%, transparent); transform: translateX(103%); transition: opacity var(--motion-base) ease; }
   .notes-editor-frame[data-outline-open="true"] .notes-editor-outline { transform: translateX(0); }
   .notes-editor-outline-header { padding-right: max(9px, env(safe-area-inset-right)); }
   .notes-editor-outline-close, .notes-editor-outline-link { min-height: 44px; touch-action: manipulation; }
@@ -1906,12 +1861,10 @@ html,
   .notes-document-toolbar { align-items: center; flex-direction: row; gap: 6px; overflow: visible; padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); }
   .notes-toolbar-leading { width: auto; min-height: 44px; flex: 1 1 auto; }
   .notes-document-actions { width: auto; display: flex; gap: 4px; }
-  .notes-document-actions > [data-note-mobile-overflow] { display: none; }
   .notes-save-state { display: inline-flex; min-height: 44px; align-items: center; padding-inline: 4px; color: var(--text-secondary); font-size: 11px; }
   .notes-save-state[data-dirty="true"] { color: var(--warning); }
   .notes-outline-action { min-width: 44px; padding-inline: 10px; }
-  .notes-document-actions > .button, .notes-document-more > summary { min-height: 44px; justify-content: center; touch-action: manipulation; }
-  .notes-document-more { display: block; }
+  .notes-document-actions > .button, .notes-document-more > summary.button { min-height: 44px; justify-content: center; touch-action: manipulation; }
   .notes-document-more-menu .button { min-height: 44px; touch-action: manipulation; }
   .notes-content.is-document { --notes-document-inline: 16px; }
   .notes-content.is-document.has-line-numbers { --notes-document-inline: 30px; }
@@ -1942,7 +1895,7 @@ html,
   .note-history-detail-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .note-history-mode, .note-history-detail-actions .button { min-width: 0; min-height: 44px; padding-inline: 5px; }
   .note-history-content { padding: 18px max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
-  .dialog.note-history-dialog { width: 100%; height: 100dvh; max-height: none; }
+  .dialog.note-history-dialog { width: 100%; height: 100svh; height: 100dvh; max-height: none; }
   .notes-file-table { overflow: visible; }
   .notes-file-columns { display: none; }
   .notes-file-list { min-width: 0; display: grid; gap: 8px; padding: 10px 12px max(28px, calc(16px + env(safe-area-inset-bottom))); }
@@ -1983,7 +1936,7 @@ html,
   .input, .select { height: 44px; min-height: 44px; }
   :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }
   .dialog-backdrop { place-items: stretch; padding: 0; }
-  .dialog, .dialog.narrow, .dialog.sheet { width: 100%; height: 100dvh; max-height: none; border-width: 0; border-radius: 0; }
+  .dialog, .dialog.narrow, .dialog.sheet { width: 100%; height: 100svh; height: 100dvh; max-height: none; border-width: 0; border-radius: 0; }
   .dialog-header { padding: max(15px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)); }
   .dialog-header .button { width: 44px; min-width: 44px; min-height: 44px; }
   .dialog-body { padding: 18px max(16px, env(safe-area-inset-right)) max(24px, calc(16px + env(safe-area-inset-bottom))) max(16px, env(safe-area-inset-left)); }
@@ -1994,7 +1947,7 @@ html,
   .toast { max-width: none; }
 }
 
-@media (min-width: 761px) and (max-width: 1120px) {
+@media (min-width: 1121px) and (max-width: 1280px) {
   .notes-file-info { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
 }
 
@@ -2052,7 +2005,13 @@ html,
 @media (max-width: 390px) {
   .topbar { gap: 8px; padding-inline: 10px; }
   .topbar-title { gap: 6px; }
-  .topbar-heading { max-width: 118px; }
+  .topbar-kicker { display: none; }
+  .topbar-heading { max-width: none; }
+  .topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .notes-document-toolbar { padding-inline: 6px; }
+  .notes-toolbar-leading { min-width: 44px; }
+  .notes-breadcrumb { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
+  .notes-save-state { max-width: 44px; overflow: hidden; white-space: nowrap; }
   .notes-file-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .candidate-actions { display: grid; grid-template-columns: 1fr; }
   .candidate-actions .button { width: 100%; }
@@ -2067,7 +2026,7 @@ html,
 }
 
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
+  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
 }
 
 @media (forced-colors: active) {