@lemoncat7/dsh-knowledge 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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,48 @@ 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 p { max-width: 56ch; margin: 0; color: var(--text-tertiary); font-size: 12px; text-align: right; }
420
+ .workspace-tabs { flex: none; }
421
+ .workspace-tabs .tab { display: inline-flex; align-items: center; gap: 7px; }
422
+ .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; }
423
+ .tab[aria-selected="true"] .tab-count { background: var(--accent-soft); color: var(--accent); }
424
+ .library-management, .mount-section { min-width: 0; }
425
+ .knowledge-base-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
426
+ .base-search { max-width: 560px; }
427
+ .base-result-summary { margin-left: auto; color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
428
+ .base-grid { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
376
429
  .base-card {
377
430
  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;
431
+ display: grid;
432
+ grid-template-columns: minmax(210px, .85fr) minmax(240px, 1.25fr) minmax(170px, .7fr) auto;
433
+ grid-template-rows: auto auto;
434
+ align-items: center;
435
+ gap: 8px 22px;
436
+ border-bottom: 1px solid var(--border);
437
+ padding: 16px 18px;
384
438
  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; }
439
+ transition: background .18s ease;
440
+ }
441
+ .base-card:last-child { border-bottom: 0; }
442
+ .base-card:hover { background: var(--surface-hover); }
443
+ .base-card.is-archived { opacity: .78; }
444
+ .base-card-header { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
445
+ .base-card-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
446
+ .base-card-identity > div { min-width: 0; }
447
+ .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; }
448
+ .base-card h3 { overflow: hidden; margin: 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
389
449
  .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; }
450
+ .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; }
451
+ .base-card-tags { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 5px; }
452
+ .base-card-meta { grid-column: 3; grid-row: 1 / span 2; display: grid; gap: 7px; color: var(--text-secondary); font-size: 11px; }
453
+ .base-card-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
454
+ .base-card-meta strong { display: block; margin-bottom: 1px; color: var(--text-tertiary); font-size: 10px; font-weight: 550; }
455
+ .base-card-actions { grid-column: 4; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
456
+ .archived-bases { margin-top: 18px; }
457
+ .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; }
458
+ .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
459
  .mount-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
402
460
  .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
461
  .context-pill strong { color: var(--text-secondary); }
@@ -433,7 +491,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
433
491
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
434
492
  .search-box { position: relative; flex: 1 1 280px; }
435
493
  .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; }
494
+ .search-symbol { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }
437
495
  .toolbar .select { width: auto; min-width: 132px; }
438
496
 
439
497
  .document-page { min-width: 0; }
@@ -443,14 +501,16 @@ button:disabled { cursor: not-allowed; opacity: .56; }
443
501
  gap: 10px;
444
502
  margin-bottom: 14px;
445
503
  }
446
- .document-global-search { min-width: 220px; }
504
+ .document-global-search { min-width: 240px; max-width: 620px; }
505
+ .document-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
506
+ .legacy-entries-toolbar { justify-content: space-between; }
447
507
  .compact-library-picker,
448
508
  .mobile-document-picker { display: none; }
449
509
  .document-browser {
450
510
  min-width: 0;
451
511
  height: clamp(600px, calc(100dvh - 188px), 860px);
452
512
  display: grid;
453
- grid-template-columns: min(var(--library-width, 220px), 28%) 8px min(var(--document-list-width, 280px), 34%) 8px minmax(320px, 1fr);
513
+ grid-template-columns: min(var(--library-width, 220px), 28%) 6px min(var(--document-list-width, 280px), 34%) 6px minmax(320px, 1fr);
454
514
  overflow: hidden;
455
515
  border: 1px solid var(--border);
456
516
  border-radius: 16px;
@@ -477,7 +537,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
477
537
  padding: 11px 13px;
478
538
  }
479
539
  .column-header > div { min-width: 0; }
480
- .column-header h2 { margin: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
540
+ .column-header h2 { margin: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
481
541
  .column-header span { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 11px; }
482
542
  .library-list,
483
543
  .document-list { min-height: 0; flex: 1; overflow: auto; padding: 7px; outline-offset: -3px; }
@@ -485,7 +545,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
485
545
  .document-row {
486
546
  position: relative;
487
547
  width: 100%;
488
- min-height: 54px;
548
+ min-height: 60px;
489
549
  display: grid;
490
550
  grid-template-columns: auto minmax(0, 1fr) auto;
491
551
  align-items: center;
@@ -513,7 +573,7 @@ button:disabled { cursor: not-allowed; opacity: .56; }
513
573
  .library-row-copy small,
514
574
  .document-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
515
575
  .library-row-copy strong,
516
- .document-row-copy strong { font-size: 12px; }
576
+ .document-row-copy strong { font-size: 13px; }
517
577
  .library-row-copy small,
518
578
  .document-row-copy small { margin-top: 2px; color: var(--text-tertiary); font-size: 10px; font-weight: 400; }
519
579
  .library-count,
@@ -591,7 +651,8 @@ button:disabled { cursor: not-allowed; opacity: .56; }
591
651
  .card-footer { margin-top: auto; padding-top: 16px; }
592
652
  .card-actions { display: flex; gap: 4px; }
593
653
  .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; }
654
+ .tag { border-radius: 6px; padding: 2px 7px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; }
655
+ .tag.is-empty { color: var(--text-tertiary); font-style: italic; }
595
656
 
596
657
  .tabs { display: inline-flex; gap: 3px; border-radius: 10px; padding: 3px; background: var(--surface-soft); }
597
658
  .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 +677,14 @@ button:disabled { cursor: not-allowed; opacity: .56; }
616
677
  .empty-state .button { margin-top: 16px; }
617
678
 
618
679
  .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); } }
680
+ .loading-skeleton { min-height: 280px; padding-top: 6px; }
681
+ .skeleton-line, .skeleton-block { position: relative; overflow: hidden; background: var(--surface-soft); }
682
+ .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; }
683
+ .skeleton-title { width: min(280px, 48%); height: 22px; border-radius: 7px; }
684
+ .skeleton-copy { width: min(460px, 72%); height: 12px; margin-top: 10px; border-radius: 5px; }
685
+ .skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
686
+ .skeleton-block { height: 150px; border-radius: var(--radius); }
687
+ @keyframes skeleton-shimmer { to { transform: translateX(100%); } }
621
688
 
622
689
  .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
690
  .error-state p { margin: 0 0 12px; }
@@ -657,15 +724,6 @@ button:disabled { cursor: not-allowed; opacity: .56; }
657
724
  .dialog-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); padding: 13px 20px; }
658
725
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
659
726
  .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
727
  .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
670
728
  .check-option { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 9px; }
671
729
 
@@ -695,27 +753,34 @@ button:disabled { cursor: not-allowed; opacity: .56; }
695
753
  .dashboard-grid { grid-template-columns: 1fr; }
696
754
  .candidate-body { grid-template-columns: 1fr; }
697
755
  .mount-manager-toolbar .tabs { width: 100%; }
698
- .document-browser { grid-template-columns: min(var(--document-list-width, 280px), 42%) 8px minmax(0, 1fr); }
756
+ .document-browser { grid-template-columns: min(var(--document-list-width, 280px), 42%) 6px minmax(0, 1fr); }
699
757
  .knowledge-library-column { display: none; }
700
758
  .column-resizer[data-column="library"] { display: none; }
701
759
  .compact-library-picker { display: block; width: min(220px, 28vw); }
702
- .document-pane-toggles .pane-toggle-button[data-pane="library"] { display: none; }
760
+ }
761
+
762
+ @media (max-width: 1180px) {
763
+ .base-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; gap: 7px 18px; }
764
+ .base-card-header { grid-column: 1; grid-row: 1; }
765
+ .base-description { grid-column: 1; grid-row: 2; }
766
+ .base-card-tags { grid-column: 1; grid-row: 3; }
767
+ .base-card-meta { grid-column: 1; grid-row: 4; display: flex; flex-wrap: wrap; gap: 7px 18px; }
768
+ .base-card-meta strong { display: inline; margin-right: 5px; }
769
+ .base-card-actions { grid-column: 2; grid-row: 1 / span 4; max-width: 170px; }
703
770
  }
704
771
 
705
772
  @media (min-width: 981px) {
706
773
  .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); }
774
+ .document-browser[data-document-list-hidden="true"] .document-list-column { display: none; }
775
+ .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); }
776
+ .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
777
  .document-browser[data-library-hidden="true"][data-document-list-hidden="true"] { grid-template-columns: minmax(320px, 1fr); }
713
778
  }
714
779
 
715
780
  @media (min-width: 761px) and (max-width: 980px) {
781
+ .document-column-control[data-column="library"] { display: none; }
716
782
  .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; }
783
+ .document-browser[data-document-list-hidden="true"] .document-list-column { display: none; }
719
784
  }
720
785
 
721
786
  @media (min-width: 761px) {
@@ -728,8 +793,8 @@ button:disabled { cursor: not-allowed; opacity: .56; }
728
793
  :root { --sidebar-width: 0px; }
729
794
  .app-shell { display: block; }
730
795
  .app-sidebar-resizer { display: none; }
731
- .pane-toggle-button[data-pane="main"],
732
- .document-pane-toggles { display: none; }
796
+ .pane-toggle-button[data-pane="main"] { display: none; }
797
+ .document-column-controls { display: none; }
733
798
  .sidebar { position: fixed; z-index: 40; width: min(82vw, 270px); transform: translateX(-105%); box-shadow: var(--shadow); transition: transform .2s ease; }
734
799
  .app-shell[data-menu-open="true"] .sidebar { transform: translateX(0); }
735
800
  .app-shell[data-menu-open="true"]::after { content: ""; position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / 35%); }
@@ -739,8 +804,17 @@ button:disabled { cursor: not-allowed; opacity: .56; }
739
804
  .topbar h1 { font-size: 17px; }
740
805
  .topbar p { display: none; }
741
806
  .page { padding: 22px 16px 42px; }
807
+ .workspace-switcher { align-items: stretch; flex-direction: column; gap: 10px; }
808
+ .workspace-switcher p { text-align: left; }
809
+ .workspace-tabs { align-self: flex-start; }
810
+ .knowledge-base-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
811
+ .base-search { max-width: none; }
812
+ .base-result-summary { margin-left: 0; }
742
813
  .document-page-toolbar { flex-wrap: wrap; }
743
814
  .document-page-toolbar .search-box { flex-basis: 100%; }
815
+ .document-toolbar-actions { margin-left: 0; }
816
+ .skeleton-grid { grid-template-columns: 1fr; }
817
+ .skeleton-block { height: 96px; }
744
818
  .document-browser { height: calc(100dvh - 210px); grid-template-columns: 1fr; }
745
819
  .document-list-column { display: none; }
746
820
  .column-resizer { display: none; }
@@ -750,6 +824,13 @@ button:disabled { cursor: not-allowed; opacity: .56; }
750
824
  .markdown-document { padding: 28px 22px 60px; }
751
825
  .card-grid { grid-template-columns: 1fr; }
752
826
  .base-grid { grid-template-columns: 1fr; }
827
+ .base-card { grid-template-columns: minmax(0, 1fr); }
828
+ .base-card-header, .base-description, .base-card-tags, .base-card-meta, .base-card-actions { grid-column: 1; }
829
+ .base-card-header { grid-row: 1; }
830
+ .base-description { grid-row: 2; }
831
+ .base-card-tags { grid-row: 3; }
832
+ .base-card-meta { grid-row: 4; }
833
+ .base-card-actions { grid-row: 5; max-width: none; justify-content: flex-start; padding-top: 4px; }
753
834
  .mount-target-line { grid-template-columns: auto minmax(0, 1fr); }
754
835
  .mount-target-line .field-hint { grid-column: 1 / -1; }
755
836
  .mount-list-row { grid-template-columns: 28px minmax(0, 1fr); }
@@ -759,8 +840,6 @@ button:disabled { cursor: not-allowed; opacity: .56; }
759
840
  .mount-bulk-actions .button { flex: 1 1 auto; }
760
841
  .candidate-header, .candidate-footer { align-items: flex-start; flex-direction: column; }
761
842
  .candidate-footer { gap: 9px; }
762
- .layout-editor-note { align-items: flex-start; flex-direction: column; }
763
- .layout-visibility { grid-template-columns: 1fr; }
764
843
  }
765
844
 
766
845
  @media (max-width: 520px) {
@@ -776,6 +855,10 @@ button:disabled { cursor: not-allowed; opacity: .56; }
776
855
  .topbar-actions .button:not(.primary) { display: none; }
777
856
  .topbar-actions .button.primary { width: 38px; overflow: hidden; padding: 0; font-size: 0; }
778
857
  .topbar-actions .button.primary::before { content: "+"; font-size: 18px; }
858
+ .workspace-tabs { width: 100%; }
859
+ .workspace-tabs .tab { min-width: 0; flex: 1; justify-content: center; padding-inline: 8px; }
860
+ .document-toolbar-actions { width: 100%; }
861
+ .document-toolbar-actions .button.primary { margin-left: auto; }
779
862
  .form-grid { grid-template-columns: 1fr; }
780
863
  .form-grid .span-2 { grid-column: auto; }
781
864
  .mount-context { grid-template-columns: 1fr; }