@lemoncat7/dsh-knowledge 0.6.0 → 0.7.2

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.
package/web/styles.css CHANGED
@@ -1,46 +1,48 @@
1
1
  :root {
2
2
  color-scheme: light dark;
3
- font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
3
+ font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
4
4
  font-size: 16px;
5
- --bg: #f5f6f8;
5
+ --bg: #f5f5f7;
6
6
  --surface: #ffffff;
7
7
  --surface-raised: #ffffff;
8
- --surface-soft: #f0f2f5;
9
- --surface-hover: #f5f7fa;
10
- --text: #17191d;
11
- --text-secondary: #545a65;
12
- --text-tertiary: #777f8c;
13
- --border: #dfe3e8;
14
- --border-strong: #cbd1d9;
15
- --accent: #335cff;
16
- --accent-hover: #2449df;
17
- --accent-soft: #e9eeff;
8
+ --surface-soft: #f0f0f3;
9
+ --surface-hover: #f5f5f8;
10
+ --text: #1d1d1f;
11
+ --text-secondary: #4c4c50;
12
+ --text-tertiary: #6e6e73;
13
+ --border: #dedee3;
14
+ --border-strong: #c7c7cc;
15
+ --accent: #086bd8;
16
+ --accent-hover: #005ab8;
17
+ --accent-soft: #e8f2ff;
18
+ --on-accent: #ffffff;
18
19
  --success: #18794e;
19
20
  --success-soft: #e8f5ee;
20
21
  --warning: #986800;
21
22
  --warning-soft: #fff4cf;
22
23
  --danger: #c9343a;
23
24
  --danger-soft: #fdebec;
24
- --shadow: 0 12px 32px rgb(20 25 35 / 8%);
25
- --radius: 14px;
25
+ --shadow: 0 18px 48px rgb(30 45 70 / 10%);
26
+ --radius: 16px;
26
27
  --sidebar-width: 236px;
27
28
  }
28
29
 
29
30
  @media (prefers-color-scheme: dark) {
30
31
  :root {
31
- --bg: #111318;
32
- --surface: #191c22;
33
- --surface-raised: #20242c;
34
- --surface-soft: #252a33;
35
- --surface-hover: #262b34;
36
- --text: #f4f6f8;
37
- --text-secondary: #b9c0ca;
38
- --text-tertiary: #929ba8;
39
- --border: #303640;
40
- --border-strong: #424a57;
41
- --accent: #7894ff;
42
- --accent-hover: #92a8ff;
43
- --accent-soft: #242f58;
32
+ --bg: #101012;
33
+ --surface: #1c1c1e;
34
+ --surface-raised: #242426;
35
+ --surface-soft: #2c2c2e;
36
+ --surface-hover: #303033;
37
+ --text: #f5f5f7;
38
+ --text-secondary: #c7c7cc;
39
+ --text-tertiary: #98989d;
40
+ --border: #353538;
41
+ --border-strong: #4a4a4f;
42
+ --accent: #64a8ff;
43
+ --accent-hover: #82b8ff;
44
+ --accent-soft: #17365d;
45
+ --on-accent: #0c1b2c;
44
46
  --success: #62c596;
45
47
  --success-soft: #163a2a;
46
48
  --warning: #e7bc62;
@@ -62,6 +64,7 @@ body {
62
64
  font-size: 14px;
63
65
  line-height: 1.5;
64
66
  text-rendering: optimizeLegibility;
67
+ -webkit-font-smoothing: antialiased;
65
68
  }
66
69
 
67
70
  button, input, select, textarea { font: inherit; }
@@ -114,7 +117,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
114
117
  height: 40px;
115
118
  border-radius: 12px;
116
119
  background: var(--accent);
117
- color: #fff;
120
+ color: var(--on-accent);
118
121
  font-size: 18px;
119
122
  font-weight: 700;
120
123
  letter-spacing: -.04em;
@@ -146,7 +149,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
146
149
  .login-error { min-height: 21px; margin: 10px 0 0; color: var(--danger); font-size: 13px; }
147
150
 
148
151
  .button {
149
- min-height: 38px;
152
+ min-height: 40px;
150
153
  border: 1px solid var(--border-strong);
151
154
  border-radius: 9px;
152
155
  padding: 7px 13px;
@@ -154,20 +157,20 @@ button:disabled { cursor: not-allowed; opacity: .56; }
154
157
  color: var(--text);
155
158
  font-weight: 600;
156
159
  white-space: nowrap;
157
- transition: background .15s ease, border-color .15s ease, transform .08s ease;
160
+ transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease;
158
161
  }
159
162
 
160
163
  .button:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--text-tertiary); }
161
- .button:active:not(:disabled) { transform: translateY(1px); }
162
- .button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
163
- .button.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); }
164
+ .button:active:not(:disabled) { transform: scale(.98); }
165
+ .button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
166
+ .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); }
164
167
  .button.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
165
168
  .button.danger:hover:not(:disabled) { background: var(--danger-soft); }
166
169
  .button.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
167
- .button.small { min-height: 31px; padding: 4px 9px; font-size: 12px; }
170
+ .button.small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
168
171
  .login-card .button { width: 100%; margin-top: 20px; }
169
172
 
170
- .app-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-width) 8px minmax(0, 1fr); }
173
+ .app-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-width) 6px minmax(0, 1fr); }
171
174
 
172
175
  .sidebar {
173
176
  position: sticky;
@@ -176,51 +179,59 @@ button:disabled { cursor: not-allowed; opacity: .56; }
176
179
  height: 100dvh;
177
180
  display: flex;
178
181
  flex-direction: column;
179
- padding: 22px 14px 16px;
180
- background: color-mix(in srgb, var(--surface) 92%, transparent);
182
+ padding: 15px 10px 12px;
183
+ border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
184
+ background: color-mix(in srgb, var(--surface) 92%, var(--bg));
181
185
  }
182
186
 
183
- .brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; }
184
- .brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
187
+ .brand { display: flex; align-items: center; min-height: 49px; padding: 2px 10px 13px; }
185
188
  .brand-copy { min-width: 0; }
186
- .brand strong { display: block; font-size: 14px; }
187
- .brand span { display: block; color: var(--text-tertiary); font-size: 11px; }
189
+ .brand strong { display: block; margin-top: 1px; font-size: 16px; line-height: 1.2; font-weight: 680; letter-spacing: -.02em; }
190
+ .brand span { display: block; color: var(--text-tertiary); font-size: 9px; font-weight: 650; letter-spacing: .075em; text-transform: uppercase; }
188
191
 
189
- .nav { display: grid; gap: 4px; }
192
+ .nav { display: grid; gap: 12px; }
193
+ .nav-group { display: grid; gap: 2px; }
194
+ .nav-group + .nav-group { border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); padding-top: 10px; }
195
+ .nav-group-label { padding: 0 10px 4px; color: var(--text-tertiary); font-size: 10px; font-weight: 600; letter-spacing: .025em; }
190
196
  .nav-button {
197
+ position: relative;
191
198
  width: 100%;
192
- min-height: 42px;
199
+ min-height: 34px;
193
200
  display: flex;
194
201
  align-items: center;
195
- gap: 11px;
202
+ gap: 8px;
196
203
  border: 0;
197
- border-radius: 10px;
198
- padding: 8px 11px;
204
+ border-radius: 8px;
205
+ padding: 6px 10px;
199
206
  background: transparent;
200
207
  color: var(--text-secondary);
201
208
  text-align: left;
202
- font-weight: 600;
209
+ font-size: 13px;
210
+ font-weight: 520;
211
+ transition: background .14s ease, color .14s ease;
203
212
  }
204
213
  .nav-button:hover { background: var(--surface-hover); color: var(--text); }
205
- .nav-button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
206
- .nav-icon { width: 20px; text-align: center; font-size: 15px; }
207
- .nav-count { margin-left: auto; min-width: 24px; border-radius: 999px; padding: 1px 7px; background: var(--surface-soft); color: var(--text-secondary); font-size: 11px; text-align: center; }
214
+ .nav-button:active { transform: translateY(1px); }
215
+ .nav-button[aria-current="page"] { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); font-weight: 640; }
216
+ .nav-button[aria-current="page"]::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; border-radius: 2px; background: var(--accent); }
217
+ .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
218
+ .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; }
208
219
  .nav-button[aria-current="page"] .nav-count { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
209
220
 
210
- .sidebar-footer { margin-top: auto; display: grid; gap: 8px; border-top: 1px solid var(--border); padding: 14px 8px 0; }
211
- .connection { display: flex; align-items: center; gap: 8px; color: var(--text-tertiary); font-size: 12px; }
212
- .status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--success); }
221
+ .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; }
222
+ .connection { display: flex; align-items: center; gap: 7px; min-height: 25px; color: var(--text-tertiary); font-size: 10px; }
223
+ .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); }
213
224
  .sidebar-footer .button { justify-self: start; }
214
225
 
215
226
  .app-sidebar-resizer,
216
227
  .column-resizer {
217
228
  position: relative;
218
229
  z-index: 12;
219
- width: 8px;
220
- min-width: 8px;
230
+ width: 6px;
231
+ min-width: 6px;
221
232
  cursor: col-resize;
222
233
  touch-action: none;
223
- background: var(--border);
234
+ background: transparent;
224
235
  outline-offset: -2px;
225
236
  }
226
237
  .app-sidebar-resizer {
@@ -233,25 +244,27 @@ button:disabled { cursor: not-allowed; opacity: .56; }
233
244
  .column-resizer::before {
234
245
  content: "";
235
246
  position: absolute;
236
- inset: 0 -3px;
247
+ inset: 0 -7px;
237
248
  }
249
+ .app-sidebar-resizer::after,
250
+ .column-resizer::after { content: ""; position: absolute; inset: 0 auto 0 50%; width: 1px; background: var(--border); transform: translateX(-50%); }
238
251
  .app-sidebar-resizer span,
239
252
  .column-resizer span {
240
253
  position: absolute;
241
254
  top: 50%;
242
255
  left: 50%;
243
- width: 18px;
244
- height: 38px;
256
+ width: 2px;
257
+ height: 28px;
245
258
  display: grid;
246
259
  place-items: center;
247
- border: 1px solid var(--border-strong);
260
+ border: 0;
248
261
  border-radius: 999px;
249
- background: var(--surface-raised);
250
- color: var(--text-tertiary);
251
- font-size: 17px;
262
+ background: var(--border-strong);
263
+ color: transparent;
264
+ font-size: 0;
252
265
  line-height: 1;
253
- opacity: 1;
254
- box-shadow: 0 2px 8px rgb(20 25 35 / 9%);
266
+ opacity: .45;
267
+ box-shadow: none;
255
268
  transform: translate(-50%, -50%);
256
269
  transition: opacity .15s ease, background .15s ease;
257
270
  }
@@ -260,32 +273,62 @@ button:disabled { cursor: not-allowed; opacity: .56; }
260
273
  .app-sidebar-resizer.is-dragging span,
261
274
  .column-resizer:hover span,
262
275
  .column-resizer:focus-visible span,
263
- .column-resizer.is-dragging span { opacity: 1; border-color: var(--accent); background: var(--accent); color: #fff; }
276
+ .column-resizer.is-dragging span { opacity: 1; background: var(--accent); }
264
277
  .app-sidebar-resizer:hover,
265
278
  .app-sidebar-resizer.is-dragging,
266
279
  .column-resizer:hover,
267
- .column-resizer.is-dragging { background: color-mix(in srgb, var(--accent) 30%, var(--border)); }
268
-
280
+ .column-resizer.is-dragging { background: color-mix(in srgb, var(--accent) 8%, transparent); }
281
+ .column-resizer:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
269
282
  .main { min-width: 0; grid-column: 3; }
270
283
  .topbar {
271
284
  position: sticky;
272
285
  top: 0;
273
286
  z-index: 10;
274
- min-height: 72px;
287
+ min-height: 76px;
275
288
  display: flex;
276
289
  align-items: center;
277
290
  justify-content: space-between;
278
291
  gap: 18px;
279
292
  border-bottom: 1px solid var(--border);
280
- padding: 14px clamp(20px, 4vw, 52px);
293
+ padding: 14px clamp(18px, 3vw, 38px);
281
294
  background: color-mix(in srgb, var(--bg) 89%, transparent);
282
295
  backdrop-filter: blur(18px);
283
296
  }
284
- .topbar h1 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
285
- .topbar p { margin: 3px 0 0; color: var(--text-tertiary); font-size: 12px; }
297
+ .topbar h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
298
+ .topbar p { margin: 4px 0 0; color: var(--text-tertiary); font-size: 12px; text-wrap: pretty; }
286
299
  .topbar-title { display: flex; align-items: center; gap: 12px; }
287
300
  .mobile-menu { display: none; }
288
301
  .topbar-actions { display: flex; align-items: center; gap: 8px; }
302
+ .document-column-controls {
303
+ flex: none;
304
+ display: inline-flex;
305
+ align-items: center;
306
+ gap: 2px;
307
+ border: 1px solid var(--border);
308
+ border-radius: 9px;
309
+ padding: 2px;
310
+ background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
311
+ }
312
+ .document-column-controls-label { padding: 0 7px 0 8px; color: var(--text-tertiary); font-size: 10px; font-weight: 550; }
313
+ .document-column-control {
314
+ min-height: 30px;
315
+ border: 0;
316
+ border-radius: 7px;
317
+ padding: 5px 10px;
318
+ background: transparent;
319
+ color: var(--text-tertiary);
320
+ font-size: 11px;
321
+ font-weight: 600;
322
+ white-space: nowrap;
323
+ transition: background .14s ease, color .14s ease, box-shadow .14s ease;
324
+ }
325
+ .document-column-control:hover { background: var(--surface-hover); color: var(--text); }
326
+ .document-column-control:active { transform: translateY(1px); }
327
+ .document-column-control[aria-pressed="true"] {
328
+ background: var(--surface-raised);
329
+ color: var(--text);
330
+ box-shadow: 0 1px 4px rgb(20 25 35 / 9%);
331
+ }
289
332
  .pane-toggle-group {
290
333
  flex: none;
291
334
  display: inline-flex;
@@ -353,7 +396,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
353
396
  opacity: .18;
354
397
  }
355
398
 
356
- .page { width: min(100%, 1240px); margin: 0 auto; padding: 30px clamp(20px, 4vw, 52px) 56px; }
399
+ .page { width: min(100%, 1440px); margin: 0 auto; padding: 28px clamp(18px, 3vw, 38px) 64px; }
357
400
 
358
401
  .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
359
402
  .section-heading h2 { margin: 0; font-size: 16px; }
@@ -371,33 +414,84 @@ button:disabled { cursor: not-allowed; opacity: .56; }
371
414
  .panel-header h2, .panel-header h3 { margin: 0; font-size: 14px; }
372
415
  .panel-body { padding: 8px; }
373
416
 
374
- .bases-page { display: grid; gap: 34px; }
375
- .base-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
417
+ .bases-page { display: grid; gap: 26px; }
418
+ .workspace-switcher { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); padding-bottom: 18px; }
419
+ .workspace-switcher-leading { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
420
+ .workspace-switcher p { max-width: 56ch; margin: 0; color: var(--text-tertiary); font-size: 12px; text-align: right; }
421
+ .workspace-tabs { flex: none; }
422
+ .workspace-tabs .tab { display: inline-flex; align-items: center; gap: 7px; }
423
+ .writeback-policy-control {
424
+ min-height: 36px;
425
+ display: inline-flex;
426
+ align-items: center;
427
+ gap: 7px;
428
+ border-left: 1px solid var(--border);
429
+ padding-left: 10px;
430
+ }
431
+ .writeback-policy-label { color: var(--text-tertiary); font-size: 11px; font-weight: 600; white-space: nowrap; }
432
+ .writeback-policy-segments {
433
+ display: inline-flex;
434
+ gap: 2px;
435
+ border: 1px solid var(--border);
436
+ border-radius: 9px;
437
+ padding: 2px;
438
+ background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
439
+ }
440
+ .writeback-policy-option {
441
+ min-width: 48px;
442
+ min-height: 30px;
443
+ border: 0;
444
+ border-radius: 7px;
445
+ padding: 5px 10px;
446
+ background: transparent;
447
+ color: var(--text-tertiary);
448
+ font-size: 11px;
449
+ font-weight: 620;
450
+ transition: background .14s ease, color .14s ease, box-shadow .14s ease;
451
+ }
452
+ .writeback-policy-option:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
453
+ .writeback-policy-option[aria-checked="true"] {
454
+ background: var(--surface-raised);
455
+ color: var(--text);
456
+ box-shadow: 0 1px 4px rgb(20 25 35 / 10%);
457
+ }
458
+ .tab-count { min-width: 20px; border-radius: 6px; padding: 1px 6px; background: color-mix(in srgb, var(--text-tertiary) 10%, transparent); color: var(--text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; }
459
+ .tab[aria-selected="true"] .tab-count { background: var(--accent-soft); color: var(--accent); }
460
+ .library-management, .mount-section { min-width: 0; }
461
+ .knowledge-base-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
462
+ .base-search { max-width: 560px; }
463
+ .base-result-summary { margin-left: auto; color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
464
+ .base-grid { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
376
465
  .base-card {
377
466
  min-width: 0;
378
- display: flex;
379
- flex-direction: column;
380
- gap: 12px;
381
- border: 1px solid var(--border);
382
- border-radius: var(--radius);
383
- padding: 17px;
467
+ display: grid;
468
+ grid-template-columns: minmax(210px, .85fr) minmax(240px, 1.25fr) minmax(170px, .7fr) auto;
469
+ grid-template-rows: auto auto;
470
+ align-items: center;
471
+ gap: 8px 22px;
472
+ border-bottom: 1px solid var(--border);
473
+ padding: 16px 18px;
384
474
  background: var(--surface);
385
- }
386
- .base-card.is-archived { opacity: .72; }
387
- .base-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
388
- .base-card h3 { margin: 0; font-size: 15px; }
475
+ transition: background .18s ease;
476
+ }
477
+ .base-card:last-child { border-bottom: 0; }
478
+ .base-card:hover { background: var(--surface-hover); }
479
+ .base-card.is-archived { opacity: .78; }
480
+ .base-card-header { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
481
+ .base-card-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
482
+ .base-card-identity > div { min-width: 0; }
483
+ .base-symbol { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 700; }
484
+ .base-card h3 { overflow: hidden; margin: 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
389
485
  .base-card small { display: block; overflow: hidden; margin-top: 3px; color: var(--text-tertiary); text-overflow: ellipsis; white-space: nowrap; }
390
- .base-description { display: grid; gap: 3px; }
391
- .base-description strong { color: var(--text-tertiary); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
392
- .base-description p { margin: 0; color: var(--text-secondary); }
393
- .base-instructions { display: grid; gap: 3px; border-left: 2px solid var(--accent); padding-left: 10px; color: var(--text-secondary); font-size: 12px; }
394
- .base-instructions strong { color: var(--text-tertiary); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
395
- .base-model { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 12px; }
396
- .base-model strong { color: var(--text-tertiary); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
397
- .base-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; margin-top: auto; padding-top: 3px; }
398
- .archived-bases { margin-top: 16px; }
399
- .archived-bases summary { margin-bottom: 12px; color: var(--text-secondary); cursor: pointer; font-weight: 600; }
400
- .mount-section { min-width: 0; }
486
+ .base-description { grid-column: 2; grid-row: 1; display: -webkit-box; overflow: hidden; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
487
+ .base-card-tags { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 5px; }
488
+ .base-card-meta { grid-column: 3; grid-row: 1 / span 2; display: grid; gap: 7px; color: var(--text-secondary); font-size: 11px; }
489
+ .base-card-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
490
+ .base-card-meta strong { display: block; margin-bottom: 1px; color: var(--text-tertiary); font-size: 10px; font-weight: 550; }
491
+ .base-card-actions { grid-column: 4; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
492
+ .archived-bases { margin-top: 18px; }
493
+ .archived-bases summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; border-radius: 10px; padding: 9px 12px; background: var(--surface-soft); color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 600; }
494
+ .summary-count { min-width: 23px; border-radius: 6px; padding: 1px 7px; background: var(--surface); color: var(--text-tertiary); text-align: center; font-variant-numeric: tabular-nums; }
401
495
  .mount-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
402
496
  .context-pill { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-soft); }
403
497
  .context-pill strong { color: var(--text-secondary); }
@@ -433,7 +527,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
433
527
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
434
528
  .search-box { position: relative; flex: 1 1 280px; }
435
529
  .search-box .input { padding-left: 37px; }
436
- .search-symbol { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }
530
+ .search-symbol { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }
437
531
  .toolbar .select { width: auto; min-width: 132px; }
438
532
 
439
533
  .document-page { min-width: 0; }
@@ -443,14 +537,16 @@ button:disabled { cursor: not-allowed; opacity: .56; }
443
537
  gap: 10px;
444
538
  margin-bottom: 14px;
445
539
  }
446
- .document-global-search { min-width: 220px; }
540
+ .document-global-search { min-width: 240px; max-width: 620px; }
541
+ .document-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
542
+ .legacy-entries-toolbar { justify-content: space-between; }
447
543
  .compact-library-picker,
448
544
  .mobile-document-picker { display: none; }
449
545
  .document-browser {
450
546
  min-width: 0;
451
547
  height: clamp(600px, calc(100dvh - 188px), 860px);
452
548
  display: grid;
453
- grid-template-columns: min(var(--library-width, 220px), 28%) 8px min(var(--document-list-width, 280px), 34%) 8px minmax(320px, 1fr);
549
+ grid-template-columns: min(var(--library-width, 220px), 28%) 6px min(var(--document-list-width, 280px), 34%) 6px minmax(320px, 1fr);
454
550
  overflow: hidden;
455
551
  border: 1px solid var(--border);
456
552
  border-radius: 16px;
@@ -477,7 +573,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
477
573
  padding: 11px 13px;
478
574
  }
479
575
  .column-header > div { min-width: 0; }
480
- .column-header h2 { margin: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
576
+ .column-header h2 { margin: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
481
577
  .column-header span { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 11px; }
482
578
  .library-list,
483
579
  .document-list { min-height: 0; flex: 1; overflow: auto; padding: 7px; outline-offset: -3px; }
@@ -485,7 +581,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
485
581
  .document-row {
486
582
  position: relative;
487
583
  width: 100%;
488
- min-height: 54px;
584
+ min-height: 60px;
489
585
  display: grid;
490
586
  grid-template-columns: auto minmax(0, 1fr) auto;
491
587
  align-items: center;
@@ -513,7 +609,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
513
609
  .library-row-copy small,
514
610
  .document-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
515
611
  .library-row-copy strong,
516
- .document-row-copy strong { font-size: 12px; }
612
+ .document-row-copy strong { font-size: 13px; }
517
613
  .library-row-copy small,
518
614
  .document-row-copy small { margin-top: 2px; color: var(--text-tertiary); font-size: 10px; font-weight: 400; }
519
615
  .library-count,
@@ -591,7 +687,8 @@ button:disabled { cursor: not-allowed; opacity: .56; }
591
687
  .card-footer { margin-top: auto; padding-top: 16px; }
592
688
  .card-actions { display: flex; gap: 4px; }
593
689
  .tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
594
- .tag { border-radius: 5px; padding: 2px 6px; background: var(--surface-soft); color: var(--text-tertiary); font-size: 10px; }
690
+ .tag { border-radius: 6px; padding: 2px 7px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; }
691
+ .tag.is-empty { color: var(--text-tertiary); font-style: italic; }
595
692
 
596
693
  .tabs { display: inline-flex; gap: 3px; border-radius: 10px; padding: 3px; background: var(--surface-soft); }
597
694
  .tab { min-height: 33px; border: 0; border-radius: 7px; padding: 5px 12px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
@@ -616,8 +713,14 @@ button:disabled { cursor: not-allowed; opacity: .56; }
616
713
  .empty-state .button { margin-top: 16px; }
617
714
 
618
715
  .loading { display: grid; place-items: center; min-height: 240px; color: var(--text-tertiary); }
619
- .spinner { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
620
- @keyframes spin { to { transform: rotate(360deg); } }
716
+ .loading-skeleton { min-height: 280px; padding-top: 6px; }
717
+ .skeleton-line, .skeleton-block { position: relative; overflow: hidden; background: var(--surface-soft); }
718
+ .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; }
719
+ .skeleton-title { width: min(280px, 48%); height: 22px; border-radius: 7px; }
720
+ .skeleton-copy { width: min(460px, 72%); height: 12px; margin-top: 10px; border-radius: 5px; }
721
+ .skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
722
+ .skeleton-block { height: 150px; border-radius: var(--radius); }
723
+ @keyframes skeleton-shimmer { to { transform: translateX(100%); } }
621
724
 
622
725
  .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); }
623
726
  .error-state p { margin: 0 0 12px; }
@@ -657,15 +760,6 @@ button:disabled { cursor: not-allowed; opacity: .56; }
657
760
  .dialog-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); padding: 13px 20px; }
658
761
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
659
762
  .form-grid .span-2 { grid-column: 1 / -1; }
660
- .range-row { display: flex; align-items: center; gap: 10px; }
661
- .range-row input { flex: 1; }
662
- .range-value { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
663
- .layout-editor { display: grid; gap: 18px; }
664
- .layout-visibility { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
665
- .layout-range-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
666
- .layout-range-label label { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
667
- .layout-editor input[type="range"] { width: 100%; accent-color: var(--accent); }
668
- .layout-editor-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); padding-top: 14px; color: var(--text-tertiary); font-size: 12px; }
669
763
  .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
670
764
  .check-option { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 9px; }
671
765
 
@@ -695,27 +789,34 @@ button:disabled { cursor: not-allowed; opacity: .56; }
695
789
  .dashboard-grid { grid-template-columns: 1fr; }
696
790
  .candidate-body { grid-template-columns: 1fr; }
697
791
  .mount-manager-toolbar .tabs { width: 100%; }
698
- .document-browser { grid-template-columns: min(var(--document-list-width, 280px), 42%) 8px minmax(0, 1fr); }
792
+ .document-browser { grid-template-columns: min(var(--document-list-width, 280px), 42%) 6px minmax(0, 1fr); }
699
793
  .knowledge-library-column { display: none; }
700
794
  .column-resizer[data-column="library"] { display: none; }
701
795
  .compact-library-picker { display: block; width: min(220px, 28vw); }
702
- .document-pane-toggles .pane-toggle-button[data-pane="library"] { display: none; }
796
+ }
797
+
798
+ @media (max-width: 1180px) {
799
+ .base-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; gap: 7px 18px; }
800
+ .base-card-header { grid-column: 1; grid-row: 1; }
801
+ .base-description { grid-column: 1; grid-row: 2; }
802
+ .base-card-tags { grid-column: 1; grid-row: 3; }
803
+ .base-card-meta { grid-column: 1; grid-row: 4; display: flex; flex-wrap: wrap; gap: 7px 18px; }
804
+ .base-card-meta strong { display: inline; margin-right: 5px; }
805
+ .base-card-actions { grid-column: 2; grid-row: 1 / span 4; max-width: 170px; }
703
806
  }
704
807
 
705
808
  @media (min-width: 981px) {
706
809
  .document-browser[data-library-hidden="true"] .knowledge-library-column,
707
- .document-browser[data-library-hidden="true"] .column-resizer[data-column="library"],
708
- .document-browser[data-document-list-hidden="true"] .document-list-column,
709
- .document-browser[data-document-list-hidden="true"] .column-resizer[data-column="documentList"] { display: none; }
710
- .document-browser[data-library-hidden="true"][data-document-list-hidden="false"] { grid-template-columns: min(var(--document-list-width, 280px), 34%) 8px minmax(320px, 1fr); }
711
- .document-browser[data-library-hidden="false"][data-document-list-hidden="true"] { grid-template-columns: min(var(--library-width, 220px), 28%) 8px minmax(320px, 1fr); }
810
+ .document-browser[data-document-list-hidden="true"] .document-list-column { display: none; }
811
+ .document-browser[data-library-hidden="true"][data-document-list-hidden="false"] { grid-template-columns: min(var(--document-list-width, 280px), 34%) 6px minmax(320px, 1fr); }
812
+ .document-browser[data-library-hidden="false"][data-document-list-hidden="true"] { grid-template-columns: min(var(--library-width, 220px), 28%) 6px minmax(320px, 1fr); }
712
813
  .document-browser[data-library-hidden="true"][data-document-list-hidden="true"] { grid-template-columns: minmax(320px, 1fr); }
713
814
  }
714
815
 
715
816
  @media (min-width: 761px) and (max-width: 980px) {
817
+ .document-column-control[data-column="library"] { display: none; }
716
818
  .document-browser[data-document-list-hidden="true"] { grid-template-columns: minmax(320px, 1fr); }
717
- .document-browser[data-document-list-hidden="true"] .document-list-column,
718
- .document-browser[data-document-list-hidden="true"] .column-resizer[data-column="documentList"] { display: none; }
819
+ .document-browser[data-document-list-hidden="true"] .document-list-column { display: none; }
719
820
  }
720
821
 
721
822
  @media (min-width: 761px) {
@@ -728,8 +829,8 @@ button:disabled { cursor: not-allowed; opacity: .56; }
728
829
  :root { --sidebar-width: 0px; }
729
830
  .app-shell { display: block; }
730
831
  .app-sidebar-resizer { display: none; }
731
- .pane-toggle-button[data-pane="main"],
732
- .document-pane-toggles { display: none; }
832
+ .pane-toggle-button[data-pane="main"] { display: none; }
833
+ .document-column-controls { display: none; }
733
834
  .sidebar { position: fixed; z-index: 40; width: min(82vw, 270px); transform: translateX(-105%); box-shadow: var(--shadow); transition: transform .2s ease; }
734
835
  .app-shell[data-menu-open="true"] .sidebar { transform: translateX(0); }
735
836
  .app-shell[data-menu-open="true"]::after { content: ""; position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / 35%); }
@@ -739,8 +840,18 @@ button:disabled { cursor: not-allowed; opacity: .56; }
739
840
  .topbar h1 { font-size: 17px; }
740
841
  .topbar p { display: none; }
741
842
  .page { padding: 22px 16px 42px; }
843
+ .workspace-switcher { align-items: stretch; flex-direction: column; gap: 10px; }
844
+ .workspace-switcher-leading { align-items: flex-start; }
845
+ .workspace-switcher p { text-align: left; }
846
+ .workspace-tabs { align-self: flex-start; }
847
+ .knowledge-base-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
848
+ .base-search { max-width: none; }
849
+ .base-result-summary { margin-left: 0; }
742
850
  .document-page-toolbar { flex-wrap: wrap; }
743
851
  .document-page-toolbar .search-box { flex-basis: 100%; }
852
+ .document-toolbar-actions { margin-left: 0; }
853
+ .skeleton-grid { grid-template-columns: 1fr; }
854
+ .skeleton-block { height: 96px; }
744
855
  .document-browser { height: calc(100dvh - 210px); grid-template-columns: 1fr; }
745
856
  .document-list-column { display: none; }
746
857
  .column-resizer { display: none; }
@@ -750,6 +861,13 @@ button:disabled { cursor: not-allowed; opacity: .56; }
750
861
  .markdown-document { padding: 28px 22px 60px; }
751
862
  .card-grid { grid-template-columns: 1fr; }
752
863
  .base-grid { grid-template-columns: 1fr; }
864
+ .base-card { grid-template-columns: minmax(0, 1fr); }
865
+ .base-card-header, .base-description, .base-card-tags, .base-card-meta, .base-card-actions { grid-column: 1; }
866
+ .base-card-header { grid-row: 1; }
867
+ .base-description { grid-row: 2; }
868
+ .base-card-tags { grid-row: 3; }
869
+ .base-card-meta { grid-row: 4; }
870
+ .base-card-actions { grid-row: 5; max-width: none; justify-content: flex-start; padding-top: 4px; }
753
871
  .mount-target-line { grid-template-columns: auto minmax(0, 1fr); }
754
872
  .mount-target-line .field-hint { grid-column: 1 / -1; }
755
873
  .mount-list-row { grid-template-columns: 28px minmax(0, 1fr); }
@@ -759,8 +877,6 @@ button:disabled { cursor: not-allowed; opacity: .56; }
759
877
  .mount-bulk-actions .button { flex: 1 1 auto; }
760
878
  .candidate-header, .candidate-footer { align-items: flex-start; flex-direction: column; }
761
879
  .candidate-footer { gap: 9px; }
762
- .layout-editor-note { align-items: flex-start; flex-direction: column; }
763
- .layout-visibility { grid-template-columns: 1fr; }
764
880
  }
765
881
 
766
882
  @media (max-width: 520px) {
@@ -776,6 +892,11 @@ button:disabled { cursor: not-allowed; opacity: .56; }
776
892
  .topbar-actions .button:not(.primary) { display: none; }
777
893
  .topbar-actions .button.primary { width: 38px; overflow: hidden; padding: 0; font-size: 0; }
778
894
  .topbar-actions .button.primary::before { content: "+"; font-size: 18px; }
895
+ .workspace-tabs { width: 100%; }
896
+ .workspace-tabs .tab { min-width: 0; flex: 1; justify-content: center; padding-inline: 8px; }
897
+ .writeback-policy-control { width: 100%; justify-content: space-between; border-left: 0; padding-left: 0; }
898
+ .document-toolbar-actions { width: 100%; }
899
+ .document-toolbar-actions .button.primary { margin-left: auto; }
779
900
  .form-grid { grid-template-columns: 1fr; }
780
901
  .form-grid .span-2 { grid-column: auto; }
781
902
  .mount-context { grid-template-columns: 1fr; }