cursor-guard 4.9.12 → 4.9.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +697 -697
  2. package/README.zh-CN.md +696 -696
  3. package/ROADMAP.md +1775 -1758
  4. package/SKILL.md +631 -629
  5. package/docs/RELEASE.md +197 -196
  6. package/docs/SNAPSHOT-BOOKMARK.md +47 -0
  7. package/package.json +2 -1
  8. package/references/dashboard/public/app.js +2079 -2050
  9. package/references/dashboard/public/style.css +1660 -1628
  10. package/references/lib/core/backups.js +509 -507
  11. package/references/lib/core/core.test.js +39 -1
  12. package/references/lib/core/snapshot.js +441 -416
  13. package/references/mcp/mcp.test.js +381 -362
  14. package/references/mcp/server.js +404 -347
  15. package/references/vscode-extension/{cursor-guard-ide-4.9.12.vsix → dist/cursor-guard-ide-4.9.15.vsix} +0 -0
  16. package/references/vscode-extension/dist/dashboard/public/app.js +2079 -2050
  17. package/references/vscode-extension/dist/dashboard/public/style.css +1660 -1628
  18. package/references/vscode-extension/dist/extension.js +780 -704
  19. package/references/vscode-extension/dist/guard-version.json +1 -1
  20. package/references/vscode-extension/dist/lib/auto-setup.js +201 -192
  21. package/references/vscode-extension/dist/lib/core/backups.js +509 -507
  22. package/references/vscode-extension/dist/lib/core/snapshot.js +441 -416
  23. package/references/vscode-extension/dist/mcp/server.js +78 -12
  24. package/references/vscode-extension/dist/package.json +7 -1
  25. package/references/vscode-extension/dist/skill/ROADMAP.md +1775 -1758
  26. package/references/vscode-extension/dist/skill/SKILL.md +631 -629
  27. package/references/vscode-extension/extension.js +780 -704
  28. package/references/vscode-extension/lib/auto-setup.js +201 -192
  29. package/references/vscode-extension/package.json +7 -1
  30. package/references/vscode-extension/dist/cursor-guard-ide-4.9.12.vsix +0 -0
package/references/dashboard/public/style.css CHANGED
@@ -1,1628 +1,1660 @@
1
- /* ═══════════════════════════════════════════════════════════════
2
- Cursor Guard Dashboard — theme aligned with IDE sidebar webview
3
- ═══════════════════════════════════════════════════════════════ */
4
-
5
- :root {
6
- /* Core tokens (parity with references/vscode-extension sidebar webview) */
7
- --surface: #1f2430;
8
- --surface-2: #252a38;
9
- --border: rgba(120, 130, 160, 0.22);
10
- --text: #e8eaf0;
11
- --muted: #9aa4bd;
12
- --green: #89d18a;
13
- --yellow: #e4c06a;
14
- --red: #f0a0a0;
15
- --orange: #f0b070;
16
- --blue: #8eb6ff;
17
- --purple: #b8a8e8;
18
- --radius: 12px;
19
- --radius-sm: 8px;
20
- --radius-lg: 14px;
21
- --shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
22
- --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.12);
23
- --glow-green: color-mix(in srgb, var(--green) 38%, transparent);
24
- --shell-green-1: color-mix(in srgb, var(--green) 16%, #070907);
25
- --shell-green-2: color-mix(in srgb, var(--green) 9%, #050805);
26
-
27
- /* Legacy names used across this file */
28
- --bg-primary: var(--surface);
29
- --bg-secondary: var(--surface-2);
30
- --bg-tertiary: color-mix(in srgb, var(--surface-2) 88%, var(--text));
31
- --bg-elevated: color-mix(in srgb, var(--surface-2) 94%, #0a0c12);
32
- --bg-hover: color-mix(in srgb, var(--text) 6%, transparent);
33
- --border-subtle: color-mix(in srgb, var(--border) 48%, transparent);
34
- --border-glow: color-mix(in srgb, var(--blue) 38%, var(--border));
35
- --text-primary: var(--text);
36
- --text-secondary: var(--muted);
37
- --text-tertiary: color-mix(in srgb, var(--muted) 72%, var(--surface));
38
- --text-heading: var(--text);
39
- --accent: var(--blue);
40
-
41
- --green-bg: color-mix(in srgb, var(--green) 14%, transparent);
42
- --green-glow: color-mix(in srgb, var(--green) 30%, transparent);
43
- --yellow-bg: color-mix(in srgb, var(--yellow) 14%, transparent);
44
- --yellow-glow: color-mix(in srgb, var(--yellow) 28%, transparent);
45
- --red-bg: color-mix(in srgb, var(--red) 14%, transparent);
46
- --red-glow: color-mix(in srgb, var(--red) 30%, transparent);
47
- --blue-bg: color-mix(in srgb, var(--blue) 14%, transparent);
48
- --blue-glow: color-mix(in srgb, var(--blue) 24%, transparent);
49
- --purple-bg: color-mix(in srgb, var(--purple) 14%, transparent);
50
- --amber: var(--yellow);
51
- --amber-bg: var(--yellow-bg);
52
- --gray: var(--muted);
53
- --gray-bg: color-mix(in srgb, var(--muted) 12%, transparent);
54
-
55
- --topbar-h: 52px;
56
- --drawer-w: 500px;
57
- --shadow-sm: var(--shadow);
58
- --shadow-md: var(--shadow-soft);
59
- --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.22);
60
- --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
61
-
62
- --font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
63
-
64
- --card-bg: var(--bg-secondary);
65
- --bg: var(--bg-primary);
66
- }
67
-
68
- /* ── Reset ────────────────────────────────────────────────── */
69
-
70
- *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
71
-
72
- body {
73
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', Roboto, sans-serif;
74
- font-size: 13px;
75
- line-height: 1.55;
76
- color: var(--text-primary);
77
- background-color: var(--bg-primary);
78
- background-image:
79
- radial-gradient(110% 75% at 8% -15%, var(--shell-green-1), transparent 56%),
80
- radial-gradient(95% 70% at 102% 108%, var(--shell-green-2), transparent 52%),
81
- linear-gradient(168deg, #0a0c0f 0%, var(--surface) 48%, #0c100e 100%);
82
- padding-top: var(--topbar-h);
83
- -webkit-font-smoothing: antialiased;
84
- -moz-osx-font-smoothing: grayscale;
85
- }
86
-
87
- /* ── Top Bar ──────────────────────────────────────────────── */
88
-
89
- #topbar {
90
- position: fixed;
91
- top: 0; left: 0; right: 0;
92
- height: var(--topbar-h);
93
- background: color-mix(in srgb, var(--surface-2) 78%, transparent);
94
- backdrop-filter: blur(12px) saturate(1.2);
95
- -webkit-backdrop-filter: blur(12px) saturate(1.2);
96
- border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
97
- box-shadow: var(--shadow);
98
- display: flex;
99
- align-items: center;
100
- justify-content: space-between;
101
- padding: 0 20px;
102
- z-index: 50;
103
- gap: 12px;
104
- }
105
-
106
- .topbar-left, .topbar-right {
107
- display: flex;
108
- align-items: center;
109
- gap: 10px;
110
- }
111
-
112
- .logo-icon {
113
- color: var(--green);
114
- flex-shrink: 0;
115
- filter: drop-shadow(0 0 8px var(--green-glow));
116
- }
117
- .logo-text {
118
- font-weight: 800;
119
- font-size: 14px;
120
- white-space: nowrap;
121
- letter-spacing: -0.03em;
122
- line-height: 1.2;
123
- background: linear-gradient(90deg, var(--text-heading), color-mix(in srgb, var(--text-heading) 72%, var(--blue)));
124
- -webkit-background-clip: text;
125
- background-clip: text;
126
- color: transparent;
127
- }
128
-
129
- #project-select {
130
- background: color-mix(in srgb, var(--surface-2) 88%, var(--text));
131
- color: var(--text-primary);
132
- border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
133
- border-radius: 999px;
134
- padding: 5px 12px;
135
- font-size: 12px;
136
- font-weight: 600;
137
- max-width: 220px;
138
- cursor: pointer;
139
- transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
140
- }
141
- #project-select:hover {
142
- border-color: color-mix(in srgb, var(--blue) 55%, var(--border));
143
- color: var(--blue);
144
- box-shadow: var(--shadow-soft);
145
- }
146
- #project-select:focus {
147
- outline: none;
148
- border-color: color-mix(in srgb, var(--blue) 55%, var(--border));
149
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 35%, transparent);
150
- }
151
-
152
- #last-refresh { font-size: 12px; white-space: nowrap; opacity: .7; }
153
-
154
- /* ── Upgrade Banner ──────────────────────────────────────── */
155
-
156
- .upgrade-banner {
157
- position: fixed;
158
- top: var(--topbar-h);
159
- left: 0; right: 0;
160
- background: var(--yellow-bg);
161
- border-bottom: 1px solid var(--yellow);
162
- color: var(--yellow);
163
- padding: 8px 24px;
164
- font-size: 13px;
165
- font-weight: 500;
166
- display: flex;
167
- align-items: center;
168
- gap: 12px;
169
- z-index: 49;
170
- animation: slideDown 0.3s ease;
171
- }
172
- @keyframes slideDown {
173
- from { transform: translateY(-100%); opacity: 0; }
174
- to { transform: translateY(0); opacity: 1; }
175
- }
176
- .upgrade-banner-text {
177
- flex: 1;
178
- }
179
- .upgrade-banner-restart-btn {
180
- padding: 4px 14px;
181
- font-size: 12px;
182
- font-weight: 600;
183
- border: 1px solid var(--yellow);
184
- border-radius: var(--radius-sm);
185
- background: var(--yellow);
186
- color: var(--bg);
187
- cursor: pointer;
188
- white-space: nowrap;
189
- transition: all 0.15s;
190
- }
191
- .upgrade-banner-restart-btn:hover {
192
- filter: brightness(1.1);
193
- }
194
- .upgrade-banner-restart-btn:disabled {
195
- opacity: 0.7;
196
- cursor: wait;
197
- }
198
- .upgrade-banner-hint-btn {
199
- padding: 3px 10px;
200
- font-size: 11px;
201
- border: 1px solid var(--yellow);
202
- border-radius: var(--radius-sm);
203
- background: transparent;
204
- color: var(--yellow);
205
- cursor: pointer;
206
- white-space: nowrap;
207
- transition: all 0.15s;
208
- }
209
- .upgrade-banner-hint-btn:hover {
210
- background: var(--yellow);
211
- color: var(--bg);
212
- }
213
- .upgrade-banner-close {
214
- background: none;
215
- border: none;
216
- color: var(--yellow);
217
- font-size: 18px;
218
- cursor: pointer;
219
- padding: 0 4px;
220
- opacity: 0.7;
221
- transition: opacity 0.15s;
222
- }
223
- .upgrade-banner-close:hover { opacity: 1; }
224
- .upgrade-banner-hint {
225
- width: 100%;
226
- margin-top: 6px;
227
- padding: 6px 10px;
228
- background: rgba(0,0,0,0.2);
229
- border-radius: var(--radius-sm);
230
- font-size: 12px;
231
- }
232
- .upgrade-banner-hint code {
233
- font-family: var(--font-mono);
234
- font-size: 11px;
235
- color: var(--text-primary);
236
- }
237
- .upgrade-banner + main {
238
- margin-top: 38px;
239
- }
240
-
241
- /* ── Buttons ──────────────────────────────────────────────── */
242
-
243
- .btn {
244
- display: inline-flex;
245
- align-items: center;
246
- gap: 6px;
247
- padding: 8px 12px;
248
- border: 1px solid var(--border);
249
- border-radius: var(--radius);
250
- background: color-mix(in srgb, var(--surface-2) 88%, var(--text));
251
- color: var(--text-primary);
252
- font-size: 12px;
253
- font-weight: 600;
254
- font-family: inherit;
255
- cursor: pointer;
256
- transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
257
- white-space: nowrap;
258
- }
259
- .btn:hover {
260
- border-color: color-mix(in srgb, var(--blue) 55%, var(--border));
261
- color: var(--blue);
262
- box-shadow: var(--shadow-soft);
263
- }
264
- .btn:active { transform: scale(0.98); }
265
-
266
- .btn-ghost {
267
- background: transparent;
268
- border-color: color-mix(in srgb, var(--border) 55%, transparent);
269
- }
270
- .btn-ghost:hover {
271
- background: var(--bg-hover);
272
- border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
273
- }
274
-
275
- .btn-sm { padding: 4px 10px; font-size: 12px; }
276
-
277
- /* ── Main ─────────────────────────────────────────────────── */
278
-
279
- main {
280
- max-width: 1120px;
281
- margin: 0 auto;
282
- padding: 22px 20px 56px;
283
- }
284
-
285
- /* ── Sections ─────────────────────────────────────────────── */
286
-
287
- .screen { margin-bottom: 44px; }
288
-
289
- .section-title {
290
- font-size: 11px;
291
- font-weight: 700;
292
- color: var(--muted);
293
- margin-bottom: 14px;
294
- letter-spacing: 0.1em;
295
- text-transform: uppercase;
296
- }
297
-
298
- /* ── Card Grid ────────────────────────────────────────────── */
299
-
300
- .card-grid {
301
- display: grid;
302
- grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
303
- gap: 12px;
304
- }
305
-
306
- .card {
307
- background: linear-gradient(
308
- 165deg,
309
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
310
- color-mix(in srgb, var(--bg-secondary) 96%, transparent) 100%
311
- );
312
- border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
313
- border-radius: var(--radius-lg);
314
- padding: 14px 16px;
315
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
316
- position: relative;
317
- overflow: hidden;
318
- box-shadow: var(--shadow);
319
- }
320
- .card:hover {
321
- transform: translateY(-1px);
322
- border-color: color-mix(in srgb, var(--border) 70%, var(--blue));
323
- box-shadow: var(--shadow-soft);
324
- }
325
-
326
- .card-health {
327
- grid-column: 1 / -1;
328
- display: flex;
329
- align-items: center;
330
- gap: 18px;
331
- flex-wrap: wrap;
332
- background: linear-gradient(
333
- 165deg,
334
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
335
- color-mix(in srgb, var(--bg-elevated) 92%, transparent) 100%
336
- );
337
- }
338
-
339
- .card-label {
340
- font-size: 10px;
341
- font-weight: 700;
342
- text-transform: uppercase;
343
- letter-spacing: .1em;
344
- color: var(--text-tertiary);
345
- margin-bottom: 10px;
346
- }
347
-
348
- .card-value {
349
- font-size: 24px;
350
- font-weight: 800;
351
- line-height: 1.15;
352
- letter-spacing: -.02em;
353
- color: var(--text-heading);
354
- }
355
-
356
- .card-detail { margin-top: 8px; }
357
-
358
- .card-empty {
359
- color: var(--text-tertiary);
360
- font-style: italic;
361
- font-size: 13px;
362
- }
363
-
364
- .card-clickable { cursor: pointer; }
365
-
366
- /* ── Status indicators ────────────────────────────────────── */
367
-
368
- .status-dot {
369
- display: inline-block;
370
- width: 10px; height: 10px;
371
- border-radius: 50%;
372
- margin-right: 8px;
373
- flex-shrink: 0;
374
- }
375
- .status-dot.status-healthy { background: var(--green); box-shadow: 0 0 8px var(--green-glow), 0 0 2px var(--green); animation: pulse-green 2s ease-in-out infinite; }
376
- .status-dot.status-warning { background: var(--yellow); box-shadow: 0 0 8px var(--yellow-glow), 0 0 2px var(--yellow); animation: pulse-yellow 2s ease-in-out infinite; }
377
- .status-dot.status-critical { background: var(--red); box-shadow: 0 0 8px var(--red-glow), 0 0 2px var(--red); animation: pulse-red 1.5s ease-in-out infinite; }
378
- .status-dot.status-unknown { background: var(--gray); opacity: .6; }
379
- .status-dot.status-running { background: var(--green); box-shadow: 0 0 8px var(--green-glow), 0 0 2px var(--green); animation: pulse-green 2s ease-in-out infinite; }
380
- .status-dot.status-stopped { background: var(--gray); opacity: .6; }
381
- .status-dot.status-stale { background: var(--yellow); box-shadow: 0 0 8px var(--yellow-glow); }
382
-
383
- @keyframes pulse-green { 0%,100%{ box-shadow: 0 0 4px var(--green-glow); } 50%{ box-shadow: 0 0 12px var(--green-glow), 0 0 4px var(--green); } }
384
- @keyframes pulse-yellow { 0%,100%{ box-shadow: 0 0 4px var(--yellow-glow); } 50%{ box-shadow: 0 0 12px var(--yellow-glow), 0 0 4px var(--yellow); } }
385
- @keyframes pulse-red { 0%,100%{ box-shadow: 0 0 4px var(--red-glow); } 50%{ box-shadow: 0 0 14px var(--red-glow), 0 0 6px var(--red); } }
386
-
387
- .card-status {
388
- display: flex;
389
- align-items: center;
390
- font-size: 20px;
391
- font-weight: 800;
392
- letter-spacing: -.01em;
393
- }
394
-
395
- .status-text.status-healthy { color: var(--green); }
396
- .status-text.status-warning { color: var(--yellow); }
397
- .status-text.status-critical { color: var(--red); }
398
- .status-text.status-unknown { color: var(--gray); }
399
-
400
- .issue-list {
401
- list-style: none;
402
- margin-top: 10px;
403
- padding-left: 18px;
404
- }
405
- .issue-list li {
406
- position: relative;
407
- padding: 2px 0;
408
- font-size: 13px;
409
- }
410
- .issue-list li::before {
411
- content: '';
412
- position: absolute;
413
- left: -14px; top: 10px;
414
- width: 5px; height: 5px;
415
- border-radius: 50%;
416
- background: var(--yellow);
417
- }
418
-
419
- /* ── Badges ───────────────────────────────────────────────── */
420
-
421
- .badge {
422
- display: inline-flex;
423
- align-items: center;
424
- padding: 3px 10px;
425
- border-radius: 12px;
426
- font-size: 11px;
427
- font-weight: 600;
428
- letter-spacing: .02em;
429
- border: 1px solid transparent;
430
- }
431
-
432
- .badge-strategy { background: var(--blue-bg); color: var(--blue); border-color: rgba(59,130,246,.18); }
433
-
434
- .badge-pass { background: var(--green-bg); color: var(--green); border-color: rgba(74,222,128,.18); }
435
- .badge-warn { background: var(--yellow-bg); color: var(--yellow); border-color: rgba(245,158,11,.18); }
436
- .badge-fail { background: var(--red-bg); color: var(--red); border-color: rgba(239,68,68,.18); }
437
-
438
- .badge-git { background: var(--blue-bg); color: var(--blue); border-color: rgba(59,130,246,.18); }
439
- .badge-shadow { background: var(--amber-bg); color: var(--amber); border-color: rgba(245,158,11,.18); }
440
- .badge-pre { background: var(--purple-bg); color: var(--purple); border-color: rgba(167,139,250,.18); }
441
- .badge-trigger { background: var(--bg-tertiary); color: var(--text-secondary); font-size: 0.7rem; border-color: var(--border-subtle); }
442
- .badge-intent { background: var(--blue-bg); color: var(--blue); font-size: 0.7rem; border-color: rgba(59,130,246,.18); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
443
-
444
- .backup-summary-cell { max-width: 420px; min-width: 180px; }
445
- .summary-meta {
446
- display: flex;
447
- flex-wrap: wrap;
448
- align-items: baseline;
449
- gap: 8px 12px;
450
- }
451
- .summary-line-delta {
452
- font-size: 12px;
453
- font-weight: 700;
454
- font-variant-numeric: tabular-nums;
455
- color: var(--muted);
456
- letter-spacing: 0.02em;
457
- }
458
- .summary-file-row .text-muted {
459
- font-weight: 600;
460
- }
461
- .backup-meta-cell { max-width: 220px; min-width: 140px; vertical-align: top; }
462
- .backup-human-meta { display: flex; flex-direction: column; gap: 3px; font-size: 11px; line-height: 1.35; color: var(--text-secondary); }
463
- .backup-meta-line { display: block; }
464
-
465
- .summary-stack { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
466
- .summary-files {
467
- font-size: 13px;
468
- font-weight: 700;
469
- color: var(--text-heading);
470
- font-variant-numeric: tabular-nums;
471
- }
472
- .summary-intent {
473
- font-size: 12px;
474
- color: var(--blue);
475
- background: var(--blue-bg);
476
- padding: 4px 10px;
477
- border-radius: 4px;
478
- border-left: 3px solid var(--blue);
479
- overflow: hidden;
480
- text-overflow: ellipsis;
481
- white-space: nowrap;
482
- max-width: 400px;
483
- line-height: 1.4;
484
- }
485
- .summary-intent-label {
486
- font-weight: 600;
487
- opacity: 0.7;
488
- }
489
- .summary-trigger {
490
- font-size: 11px;
491
- padding: 2px 0;
492
- }
493
- .summary-restore-ctx {
494
- font-size: 12px;
495
- color: var(--amber);
496
- background: var(--amber-bg);
497
- padding: 4px 10px;
498
- border-radius: 4px;
499
- border-left: 3px solid var(--amber);
500
- overflow: hidden;
501
- text-overflow: ellipsis;
502
- white-space: nowrap;
503
- max-width: 400px;
504
- line-height: 1.4;
505
- }
506
- .summary-message {
507
- font-size: 12px;
508
- color: var(--text-primary);
509
- background: var(--bg-tertiary);
510
- padding: 3px 8px;
511
- border-radius: 3px;
512
- border-left: 3px solid var(--text-tertiary);
513
- overflow: hidden;
514
- text-overflow: ellipsis;
515
- white-space: nowrap;
516
- max-width: 400px;
517
- line-height: 1.4;
518
- }
519
- .summary-detail-line {
520
- font-size: 12px;
521
- color: var(--text-secondary);
522
- font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
523
- line-height: 1.5;
524
- padding: 1px 0;
525
- overflow: hidden;
526
- text-overflow: ellipsis;
527
- white-space: nowrap;
528
- max-width: 400px;
529
- }
530
- .summary-detail-line:first-child { padding-top: 2px; }
531
-
532
- .summary-collapsed {
533
- display: none;
534
- }
535
- .summary-expanded .summary-collapsed {
536
- display: block;
537
- }
538
- .summary-toggle-btn {
539
- background: none;
540
- border: none;
541
- color: var(--blue);
542
- font-size: 11px;
543
- font-weight: 600;
544
- cursor: pointer;
545
- padding: 2px 0;
546
- transition: color var(--transition);
547
- }
548
- .summary-toggle-btn:hover { color: var(--text-heading); }
549
- .summary-expanded .summary-toggle-btn { display: none; }
550
-
551
- .summary-pre {
552
- font-size: 12px;
553
- line-height: 1.6;
554
- white-space: pre-wrap;
555
- margin: 0;
556
- padding: 8px 10px;
557
- background: var(--bg-tertiary);
558
- border-radius: 4px;
559
- border-left: 3px solid var(--blue);
560
- }
561
-
562
- /* ── Summary inline file rows ────────────────────────────── */
563
-
564
- .summary-file-row {
565
- display: flex;
566
- align-items: center;
567
- gap: 6px;
568
- padding: 1px 0;
569
- font-size: 11px;
570
- line-height: 1.4;
571
- }
572
- .summary-file-path {
573
- flex: 1;
574
- overflow: hidden;
575
- text-overflow: ellipsis;
576
- white-space: nowrap;
577
- max-width: 220px;
578
- font-size: 11px;
579
- color: var(--text-primary);
580
- }
581
- .summary-file-more {
582
- padding: 2px 0;
583
- font-style: italic;
584
- }
585
-
586
- /* ── Stats Row ────────────────────────────────────────────── */
587
-
588
- .stats-row {
589
- display: flex;
590
- flex-wrap: wrap;
591
- gap: 14px;
592
- margin-bottom: 18px;
593
- }
594
-
595
- .stat-card {
596
- background: linear-gradient(
597
- 165deg,
598
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
599
- color-mix(in srgb, var(--bg-secondary) 96%, transparent) 100%
600
- );
601
- border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
602
- border-radius: var(--radius-lg);
603
- padding: 12px 16px;
604
- min-width: 150px;
605
- flex: 1;
606
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
607
- box-shadow: var(--shadow);
608
- }
609
- .stat-card:hover {
610
- border-color: color-mix(in srgb, var(--border) 70%, var(--blue));
611
- box-shadow: var(--shadow-soft);
612
- }
613
- .stat-label {
614
- font-size: 10px;
615
- font-weight: 700;
616
- text-transform: uppercase;
617
- letter-spacing: .08em;
618
- color: var(--text-tertiary);
619
- margin-bottom: 6px;
620
- }
621
- .stat-value {
622
- font-size: 22px;
623
- font-weight: 800;
624
- letter-spacing: -.02em;
625
- color: var(--text-heading);
626
- }
627
-
628
- /* ── Filter Bar ───────────────────────────────────────────── */
629
-
630
- .filter-bar {
631
- display: flex;
632
- flex-wrap: wrap;
633
- gap: 8px;
634
- margin-bottom: 14px;
635
- }
636
-
637
- .filter-btn {
638
- padding: 5px 14px;
639
- border: 1px solid var(--border);
640
- border-radius: 16px;
641
- background: transparent;
642
- color: var(--text-secondary);
643
- font-size: 12px;
644
- font-weight: 500;
645
- cursor: pointer;
646
- transition: all var(--transition);
647
- }
648
- .filter-btn:hover {
649
- background: var(--bg-hover);
650
- color: var(--text-primary);
651
- border-color: rgba(100,116,139,.3);
652
- }
653
- .filter-btn.active {
654
- background: var(--blue-bg);
655
- color: var(--blue);
656
- border-color: color-mix(in srgb, var(--blue) 42%, var(--border));
657
- font-weight: 600;
658
- }
659
-
660
- /* ── Table ────────────────────────────────────────────────── */
661
-
662
- .table-wrap {
663
- background: linear-gradient(
664
- 165deg,
665
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
666
- color-mix(in srgb, var(--bg-secondary) 97%, transparent) 100%
667
- );
668
- border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
669
- border-radius: var(--radius-lg);
670
- overflow: auto;
671
- max-height: 440px;
672
- box-shadow: var(--shadow);
673
- }
674
-
675
- .data-table {
676
- width: 100%;
677
- border-collapse: collapse;
678
- font-size: 13px;
679
- }
680
- .data-table th {
681
- text-align: left;
682
- padding: 12px 16px;
683
- font-weight: 700;
684
- font-size: 10px;
685
- text-transform: uppercase;
686
- letter-spacing: .08em;
687
- color: var(--text-tertiary);
688
- border-bottom: 1px solid var(--border);
689
- position: sticky;
690
- top: 0;
691
- background: var(--bg-elevated);
692
- z-index: 2;
693
- }
694
- .data-table td {
695
- padding: 10px 16px;
696
- border-bottom: 1px solid var(--border-subtle);
697
- vertical-align: top;
698
- }
699
- .data-table tbody tr {
700
- cursor: pointer;
701
- transition: background var(--transition);
702
- }
703
- .data-table tbody tr:hover {
704
- background: color-mix(in srgb, var(--blue) 6%, transparent);
705
- }
706
- .data-table tbody tr:nth-child(even) {
707
- background: color-mix(in srgb, var(--text-primary) 2.5%, transparent);
708
- }
709
- .data-table tbody tr:nth-child(even):hover {
710
- background: color-mix(in srgb, var(--blue) 6%, transparent);
711
- }
712
-
713
- /* ── Protection ───────────────────────────────────────────── */
714
-
715
- .protection-grid {
716
- display: grid;
717
- grid-template-columns: 1fr 1fr;
718
- gap: 16px;
719
- }
720
-
721
- .pattern-card {
722
- background: linear-gradient(
723
- 165deg,
724
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
725
- color-mix(in srgb, var(--bg-secondary) 96%, transparent) 100%
726
- );
727
- border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
728
- border-radius: var(--radius-lg);
729
- padding: 16px;
730
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
731
- box-shadow: var(--shadow);
732
- }
733
- .pattern-card:hover {
734
- box-shadow: var(--shadow-soft);
735
- }
736
- .pattern-card--protect {
737
- border-color: color-mix(in srgb, var(--green) 34%, var(--border));
738
- background: linear-gradient(
739
- 165deg,
740
- color-mix(in srgb, var(--green) 9%, var(--bg-secondary)) 0%,
741
- color-mix(in srgb, var(--bg-secondary) 98%, var(--text-primary)) 100%
742
- );
743
- }
744
- .pattern-card--protect:hover {
745
- border-color: color-mix(in srgb, var(--green) 48%, var(--border));
746
- }
747
- .pattern-card--ignore {
748
- border-color: color-mix(in srgb, var(--muted) 26%, var(--border));
749
- background: linear-gradient(
750
- 165deg,
751
- color-mix(in srgb, var(--muted) 7%, var(--bg-secondary)) 0%,
752
- color-mix(in srgb, var(--bg-secondary) 98%, var(--text-primary)) 100%
753
- );
754
- }
755
- .pattern-card--ignore:hover {
756
- border-color: color-mix(in srgb, var(--muted) 38%, var(--border));
757
- }
758
- .pattern-card h4 {
759
- font-size: 10px;
760
- font-weight: 700;
761
- text-transform: uppercase;
762
- letter-spacing: .1em;
763
- margin-bottom: 12px;
764
- }
765
- .pattern-card--protect h4 { color: var(--green); }
766
- .pattern-card--ignore h4 { color: color-mix(in srgb, var(--muted) 88%, var(--text)); }
767
-
768
- .pattern-empty {
769
- margin: 0;
770
- line-height: 1.5;
771
- }
772
- .pattern-empty--protect { color: color-mix(in srgb, var(--green) 65%, var(--muted)); }
773
- .pattern-empty--ignore { color: color-mix(in srgb, var(--muted) 95%, var(--text)); }
774
-
775
- .pattern-list {
776
- list-style: none;
777
- display: flex;
778
- flex-wrap: wrap;
779
- gap: 8px;
780
- }
781
- .pattern-item {
782
- font-family: var(--font-mono);
783
- font-size: 11px;
784
- padding: 5px 10px;
785
- border-radius: 8px;
786
- transition: border-color 0.15s ease, box-shadow 0.15s ease;
787
- }
788
- .pattern-item--protect {
789
- color: color-mix(in srgb, var(--green) 90%, #fff);
790
- background: color-mix(in srgb, var(--green) 13%, var(--bg-tertiary));
791
- border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
792
- box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 8%, transparent);
793
- }
794
- .pattern-item--protect:hover {
795
- border-color: color-mix(in srgb, var(--green) 58%, transparent);
796
- box-shadow: var(--shadow-soft);
797
- }
798
- .pattern-item--ignore {
799
- color: color-mix(in srgb, var(--muted) 96%, var(--text));
800
- background: color-mix(in srgb, var(--muted) 11%, var(--bg-tertiary));
801
- border: 1px solid color-mix(in srgb, var(--muted) 32%, var(--border));
802
- }
803
- .pattern-item--ignore:hover {
804
- border-color: color-mix(in srgb, var(--muted) 50%, var(--border));
805
- }
806
-
807
- .protection-note {
808
- margin-top: 16px;
809
- font-size: 12px;
810
- color: var(--text-tertiary);
811
- font-style: italic;
812
- line-height: 1.5;
813
- }
814
-
815
- .protection-count {
816
- margin-top: 14px;
817
- font-size: 14px;
818
- font-weight: 700;
819
- color: var(--text-heading);
820
- }
821
-
822
- /* ── Diagnostics Summary ──────────────────────────────────── */
823
-
824
- .diag-summary {
825
- background: linear-gradient(
826
- 165deg,
827
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
828
- color-mix(in srgb, var(--bg-elevated) 94%, transparent) 100%
829
- );
830
- border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
831
- border-radius: var(--radius-lg);
832
- padding: 18px 22px;
833
- display: flex;
834
- align-items: center;
835
- gap: 24px;
836
- cursor: pointer;
837
- transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
838
- box-shadow: var(--shadow);
839
- }
840
- .diag-summary:hover {
841
- transform: translateY(-1px);
842
- box-shadow: var(--shadow-soft);
843
- border-color: color-mix(in srgb, var(--border) 70%, var(--blue));
844
- }
845
-
846
- .diag-counts {
847
- display: flex;
848
- gap: 16px;
849
- }
850
- .diag-count {
851
- text-align: center;
852
- min-width: 48px;
853
- }
854
- .diag-count .num {
855
- font-size: 26px;
856
- font-weight: 800;
857
- display: block;
858
- letter-spacing: -.02em;
859
- }
860
- .diag-count .label {
861
- font-size: 10px;
862
- font-weight: 600;
863
- text-transform: uppercase;
864
- letter-spacing: .06em;
865
- }
866
-
867
- .diag-hint {
868
- margin-left: auto;
869
- font-size: 12px;
870
- color: var(--text-tertiary);
871
- opacity: .7;
872
- }
873
-
874
- /* ── Drawer ───────────────────────────────────────────────── */
875
-
876
- .drawer-overlay {
877
- position: fixed;
878
- inset: 0;
879
- background: rgba(0,0,0,.6);
880
- backdrop-filter: blur(4px);
881
- z-index: 100;
882
- opacity: 0;
883
- visibility: hidden;
884
- transition: opacity .25s, visibility .25s;
885
- }
886
- .drawer-overlay.active {
887
- opacity: 1;
888
- visibility: visible;
889
- }
890
-
891
- .drawer {
892
- position: fixed;
893
- top: 0; right: 0; bottom: 0;
894
- width: var(--drawer-w);
895
- max-width: 92vw;
896
- background: linear-gradient(
897
- 180deg,
898
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
899
- var(--bg-primary) 100%
900
- );
901
- border-left: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
902
- box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
903
- z-index: 101;
904
- display: flex;
905
- flex-direction: column;
906
- transform: translateX(100%);
907
- visibility: hidden;
908
- transition: transform .3s cubic-bezier(.32,.72,0,1), visibility .3s;
909
- }
910
- .drawer.active {
911
- transform: translateX(0);
912
- visibility: visible;
913
- }
914
-
915
- .drawer-header {
916
- display: flex;
917
- align-items: center;
918
- justify-content: space-between;
919
- padding: 18px 24px;
920
- border-bottom: 1px solid var(--border);
921
- }
922
- .drawer-header h3 {
923
- font-size: 15px;
924
- font-weight: 700;
925
- color: var(--text-heading);
926
- }
927
-
928
- .drawer-close {
929
- background: none;
930
- border: none;
931
- color: var(--text-tertiary);
932
- font-size: 24px;
933
- cursor: pointer;
934
- padding: 0 4px;
935
- line-height: 1;
936
- transition: color var(--transition);
937
- border-radius: 4px;
938
- }
939
- .drawer-close:hover { color: var(--text-primary); background: var(--bg-hover); }
940
-
941
- .drawer-body {
942
- flex: 1;
943
- overflow-y: auto;
944
- padding: 24px;
945
- }
946
-
947
- /* ── Drawer: Restore Point ────────────────────────────────── */
948
-
949
- .restore-field {
950
- margin-bottom: 16px;
951
- }
952
- .restore-field-label {
953
- font-size: 10px;
954
- font-weight: 700;
955
- text-transform: uppercase;
956
- letter-spacing: .08em;
957
- color: var(--text-tertiary);
958
- margin-bottom: 4px;
959
- }
960
- .restore-field-value {
961
- font-size: 14px;
962
- word-break: break-all;
963
- line-height: 1.5;
964
- }
965
-
966
- .restore-actions {
967
- display: flex;
968
- gap: 8px;
969
- margin-top: 24px;
970
- padding-top: 18px;
971
- border-top: 1px solid var(--border);
972
- }
973
-
974
- .json-preview {
975
- margin-top: 16px;
976
- padding: 14px;
977
- background: var(--bg-primary);
978
- border: 1px solid var(--border-subtle);
979
- border-radius: var(--radius-sm);
980
- font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
981
- font-size: 12px;
982
- white-space: pre-wrap;
983
- word-break: break-all;
984
- max-height: 300px;
985
- overflow: auto;
986
- color: var(--text-secondary);
987
- line-height: 1.6;
988
- }
989
-
990
- /* ── Drawer: Files Table ──────────────────────────────────── */
991
-
992
- .drawer-files-container {
993
- margin-top: 6px;
994
- max-height: 340px;
995
- overflow: auto;
996
- border: 1px solid var(--border-subtle);
997
- border-radius: var(--radius-sm);
998
- }
999
- .drawer-files-loading {
1000
- padding: 16px;
1001
- text-align: center;
1002
- }
1003
- .drawer-files-table {
1004
- width: 100%;
1005
- border-collapse: collapse;
1006
- font-size: 12px;
1007
- }
1008
- .drawer-files-table th {
1009
- text-align: left;
1010
- padding: 8px 12px;
1011
- font-size: 10px;
1012
- font-weight: 700;
1013
- text-transform: uppercase;
1014
- letter-spacing: .06em;
1015
- color: var(--text-tertiary);
1016
- border-bottom: 1px solid var(--border-subtle);
1017
- background: var(--bg-elevated);
1018
- position: sticky;
1019
- top: 0;
1020
- z-index: 1;
1021
- }
1022
- .drawer-sort-header { cursor: pointer; transition: color var(--transition); }
1023
- .drawer-sort-header:hover { color: var(--blue); }
1024
- .drawer-files-table td {
1025
- padding: 5px 12px;
1026
- border-bottom: 1px solid rgba(71,85,105,.15);
1027
- vertical-align: middle;
1028
- }
1029
- .drawer-file-path {
1030
- max-width: 280px;
1031
- overflow: hidden;
1032
- text-overflow: ellipsis;
1033
- white-space: nowrap;
1034
- color: var(--text-primary);
1035
- }
1036
- .drawer-file-changes {
1037
- white-space: nowrap;
1038
- font-variant-numeric: tabular-nums;
1039
- color: var(--text-secondary);
1040
- }
1041
-
1042
- /* ── Drawer: Doctor Checks ────────────────────────────────── */
1043
-
1044
- .check-item {
1045
- border-bottom: 1px solid var(--border-subtle);
1046
- }
1047
- .check-item:last-child { border-bottom: none; }
1048
-
1049
- .check-item summary {
1050
- display: flex;
1051
- align-items: center;
1052
- gap: 10px;
1053
- padding: 12px 0;
1054
- cursor: pointer;
1055
- list-style: none;
1056
- font-size: 13px;
1057
- transition: color var(--transition);
1058
- }
1059
- .check-item summary:hover { color: var(--text-heading); }
1060
- .check-item summary::-webkit-details-marker { display: none; }
1061
- .check-item summary::before {
1062
- content: '▸';
1063
- font-size: 10px;
1064
- color: var(--text-tertiary);
1065
- transition: transform .2s ease;
1066
- width: 14px;
1067
- text-align: center;
1068
- flex-shrink: 0;
1069
- }
1070
- .check-item[open] summary::before { transform: rotate(90deg); }
1071
-
1072
- .check-name { flex: 1; font-weight: 500; }
1073
- .check-detail {
1074
- padding: 0 0 12px 24px;
1075
- font-size: 12px;
1076
- color: var(--text-secondary);
1077
- line-height: 1.6;
1078
- }
1079
-
1080
- /* ── State panels ─────────────────────────────────────────── */
1081
-
1082
- .state-panel {
1083
- display: flex;
1084
- flex-direction: column;
1085
- align-items: center;
1086
- justify-content: center;
1087
- min-height: 320px;
1088
- text-align: center;
1089
- color: var(--text-secondary);
1090
- }
1091
-
1092
- .error-icon {
1093
- font-size: 40px;
1094
- margin-bottom: 14px;
1095
- color: var(--yellow);
1096
- filter: drop-shadow(0 0 8px var(--yellow-glow));
1097
- }
1098
-
1099
- .error-panel {
1100
- text-align: center;
1101
- padding: 48px 24px;
1102
- color: var(--text-tertiary);
1103
- }
1104
- .error-panel .error-icon { font-size: 32px; margin-bottom: 10px; }
1105
-
1106
- .empty-state {
1107
- text-align: center;
1108
- padding: 36px 20px;
1109
- color: var(--text-tertiary);
1110
- font-style: italic;
1111
- }
1112
-
1113
- /* ── Spinner ──────────────────────────────────────────────── */
1114
-
1115
- .spinner {
1116
- width: 36px; height: 36px;
1117
- border: 3px solid var(--border);
1118
- border-top-color: var(--blue);
1119
- border-radius: 50%;
1120
- animation: spin .7s linear infinite;
1121
- margin-bottom: 14px;
1122
- }
1123
- @keyframes spin { to { transform: rotate(360deg); } }
1124
-
1125
- .icon-spin-active { animation: spin .6s linear infinite; }
1126
-
1127
- /* ── Skeleton loading ────────────────────────────────────── */
1128
-
1129
- @keyframes shimmer {
1130
- 0% { background-position: -200% 0; }
1131
- 100% { background-position: 200% 0; }
1132
- }
1133
-
1134
- .skeleton-block {
1135
- height: 48px;
1136
- border-radius: var(--radius-sm);
1137
- background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
1138
- background-size: 200% 100%;
1139
- animation: shimmer 1.5s ease-in-out infinite;
1140
- }
1141
-
1142
- .skeleton-row {
1143
- display: flex;
1144
- gap: 12px;
1145
- }
1146
- .skeleton-row::before,
1147
- .skeleton-row::after {
1148
- content: '';
1149
- flex: 1;
1150
- height: 64px;
1151
- border-radius: var(--radius-sm);
1152
- background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
1153
- background-size: 200% 100%;
1154
- animation: shimmer 1.5s ease-in-out infinite;
1155
- }
1156
-
1157
- .skeleton-table {
1158
- display: flex;
1159
- flex-direction: column;
1160
- gap: 8px;
1161
- padding: 12px 0;
1162
- }
1163
- .skeleton-table::before,
1164
- .skeleton-table::after {
1165
- content: '';
1166
- display: block;
1167
- height: 36px;
1168
- border-radius: var(--radius-sm);
1169
- background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
1170
- background-size: 200% 100%;
1171
- animation: shimmer 1.5s ease-in-out infinite;
1172
- }
1173
- .skeleton-table::after { width: 75%; opacity: .6; }
1174
-
1175
- /* ── Alert Card Details ───────────────────────────────────── */
1176
-
1177
- .alert-details {
1178
- margin-top: 10px;
1179
- display: flex;
1180
- flex-direction: column;
1181
- gap: 6px;
1182
- }
1183
- .alert-detail-row {
1184
- display: flex;
1185
- align-items: center;
1186
- gap: 8px;
1187
- font-size: 12px;
1188
- color: var(--text-secondary);
1189
- }
1190
- .alert-detail-label {
1191
- font-weight: 600;
1192
- color: var(--text-tertiary);
1193
- min-width: 72px;
1194
- font-size: 10px;
1195
- text-transform: uppercase;
1196
- letter-spacing: .06em;
1197
- }
1198
- .alert-countdown {
1199
- color: var(--yellow);
1200
- font-weight: 700;
1201
- font-variant-numeric: tabular-nums;
1202
- }
1203
- .alert-numbers {
1204
- margin-top: 4px;
1205
- font-size: 13px;
1206
- font-weight: 600;
1207
- color: var(--yellow);
1208
- background: var(--yellow-bg);
1209
- padding: 6px 12px;
1210
- border-radius: var(--radius-sm);
1211
- border-left: 3px solid var(--yellow);
1212
- }
1213
-
1214
- .alert-breakdown {
1215
- color: var(--text-secondary);
1216
- font-weight: 500;
1217
- padding: 2px 12px;
1218
- }
1219
- .alert-suggestion {
1220
- padding: 4px 12px;
1221
- font-style: italic;
1222
- }
1223
- .alert-history-breakdown {
1224
- display: block;
1225
- font-size: 10px;
1226
- color: var(--text-tertiary);
1227
- margin-top: 1px;
1228
- }
1229
-
1230
- .alert-history-toggle-wrap {
1231
- margin-top: 8px;
1232
- }
1233
- .alert-history-toggle-btn {
1234
- background: none;
1235
- border: none;
1236
- color: var(--text-tertiary);
1237
- font-size: 11px;
1238
- cursor: pointer;
1239
- padding: 2px 0;
1240
- transition: color var(--transition);
1241
- }
1242
- .alert-history-toggle-btn:hover { color: var(--blue); }
1243
-
1244
- .alert-history {
1245
- margin-top: 8px;
1246
- border-top: 1px solid var(--border-subtle);
1247
- padding-top: 8px;
1248
- }
1249
- .alert-history.alert-history-collapsed { display: none; }
1250
- .alert-history-label {
1251
- font-size: 10px;
1252
- font-weight: 700;
1253
- text-transform: uppercase;
1254
- letter-spacing: .06em;
1255
- color: var(--text-tertiary);
1256
- margin-bottom: 6px;
1257
- }
1258
- .alert-history-row {
1259
- display: flex;
1260
- align-items: center;
1261
- gap: 8px;
1262
- padding: 3px 0;
1263
- font-size: 11px;
1264
- }
1265
- .badge-expired {
1266
- background: var(--gray-bg);
1267
- color: var(--gray);
1268
- border-color: rgba(100,116,139,.18);
1269
- font-size: 9px;
1270
- padding: 1px 6px;
1271
- }
1272
-
1273
- /* ── Alert Files Table ───────────────────────────────────── */
1274
-
1275
- .alert-files-section {
1276
- margin-top: 10px;
1277
- border-top: 1px solid var(--border-subtle);
1278
- padding-top: 8px;
1279
- }
1280
- .alert-files-toggle {
1281
- background: none;
1282
- border: none;
1283
- color: var(--blue);
1284
- font-size: 11px;
1285
- font-weight: 600;
1286
- cursor: pointer;
1287
- padding: 2px 0;
1288
- transition: color var(--transition);
1289
- }
1290
- .alert-files-toggle:hover { color: var(--text-heading); }
1291
-
1292
- .alert-card-actions {
1293
- margin-top: 10px;
1294
- border-top: 1px solid var(--border-subtle);
1295
- padding-top: 10px;
1296
- display: flex;
1297
- flex-wrap: wrap;
1298
- align-items: center;
1299
- gap: 10px 14px;
1300
- }
1301
- .alert-card-actions .alert-files-section {
1302
- margin-top: 0;
1303
- border-top: none;
1304
- padding-top: 0;
1305
- flex: 1 1 auto;
1306
- min-width: 0;
1307
- }
1308
- .btn-alert-dismiss {
1309
- border: 1px solid var(--border-subtle);
1310
- border-radius: var(--radius-sm);
1311
- background: color-mix(in srgb, var(--surface-2) 90%, var(--muted));
1312
- color: var(--text-secondary);
1313
- font: inherit;
1314
- font-size: 12px;
1315
- font-weight: 600;
1316
- padding: 6px 12px;
1317
- cursor: pointer;
1318
- transition: border-color var(--transition), color var(--transition), background var(--transition);
1319
- }
1320
- .btn-alert-dismiss:hover:not(:disabled) {
1321
- border-color: color-mix(in srgb, var(--muted) 40%, var(--border));
1322
- color: var(--text-primary);
1323
- }
1324
- .btn-alert-dismiss:disabled {
1325
- opacity: 0.65;
1326
- cursor: not-allowed;
1327
- }
1328
-
1329
- .alert-files-table-wrap {
1330
- margin-top: 8px;
1331
- max-height: 220px;
1332
- overflow: auto;
1333
- border: 1px solid var(--border-subtle);
1334
- border-radius: var(--radius-sm);
1335
- }
1336
- .alert-files-hidden { display: none; }
1337
-
1338
- .alert-files-table {
1339
- width: 100%;
1340
- border-collapse: collapse;
1341
- font-size: 11px;
1342
- }
1343
- .alert-files-table th {
1344
- text-align: left;
1345
- padding: 6px 10px;
1346
- font-size: 9px;
1347
- font-weight: 700;
1348
- text-transform: uppercase;
1349
- letter-spacing: .06em;
1350
- color: var(--text-tertiary);
1351
- border-bottom: 1px solid var(--border-subtle);
1352
- background: var(--bg-elevated);
1353
- position: sticky;
1354
- top: 0;
1355
- z-index: 1;
1356
- }
1357
- .alert-files-table td {
1358
- padding: 4px 10px;
1359
- border-bottom: 1px solid rgba(71,85,105,.15);
1360
- vertical-align: middle;
1361
- }
1362
- .alert-file-path {
1363
- max-width: 240px;
1364
- overflow: hidden;
1365
- text-overflow: ellipsis;
1366
- white-space: nowrap;
1367
- color: var(--text-primary);
1368
- }
1369
- .alert-file-changes {
1370
- white-space: nowrap;
1371
- font-variant-numeric: tabular-nums;
1372
- color: var(--text-secondary);
1373
- }
1374
-
1375
- .alert-action-badge {
1376
- display: inline-block;
1377
- padding: 1px 6px;
1378
- border-radius: 8px;
1379
- font-size: 9px;
1380
- font-weight: 600;
1381
- letter-spacing: .02em;
1382
- }
1383
- .alert-action-modified { background: var(--blue-bg); color: var(--blue); }
1384
- .alert-action-added { background: var(--green-bg); color: var(--green); }
1385
- .alert-action-deleted { background: var(--red-bg); color: var(--red); }
1386
- .alert-action-renamed { background: var(--purple-bg); color: var(--purple); }
1387
-
1388
- /* ── File Search ─────────────────────────────────────────── */
1389
-
1390
- .file-search-wrap {
1391
- margin-bottom: 12px;
1392
- }
1393
- .file-search-input {
1394
- width: 100%;
1395
- max-width: 360px;
1396
- background: var(--bg-secondary);
1397
- color: var(--text-primary);
1398
- border: 1px solid var(--border);
1399
- border-radius: var(--radius-sm);
1400
- padding: 8px 14px;
1401
- font-size: 13px;
1402
- font-family: inherit;
1403
- transition: border-color var(--transition);
1404
- }
1405
- .file-search-input::placeholder { color: var(--text-tertiary); }
1406
- .file-search-input:focus {
1407
- outline: none;
1408
- border-color: var(--blue);
1409
- box-shadow: 0 0 0 3px var(--blue-bg);
1410
- }
1411
-
1412
- /* ── Filter Count ────────────────────────────────────────── */
1413
-
1414
- .filter-count {
1415
- font-size: 10px;
1416
- opacity: .65;
1417
- font-weight: 400;
1418
- }
1419
-
1420
- /* ── Restore Command Section ─────────────────────────────── */
1421
-
1422
- .restore-cmd-section {
1423
- margin-top: 18px;
1424
- padding-top: 16px;
1425
- border-top: 1px solid var(--border);
1426
- }
1427
- .restore-cmd-label {
1428
- font-size: 10px;
1429
- font-weight: 700;
1430
- text-transform: uppercase;
1431
- letter-spacing: .08em;
1432
- color: var(--text-tertiary);
1433
- margin-bottom: 10px;
1434
- }
1435
- .restore-cmd-row {
1436
- display: flex;
1437
- align-items: center;
1438
- gap: 8px;
1439
- margin-bottom: 8px;
1440
- }
1441
- .restore-cmd-code {
1442
- flex: 1;
1443
- font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1444
- font-size: 11px;
1445
- background: var(--bg-primary);
1446
- border: 1px solid var(--border-subtle);
1447
- border-radius: var(--radius-sm);
1448
- padding: 8px 12px;
1449
- color: var(--green);
1450
- word-break: break-all;
1451
- line-height: 1.5;
1452
- }
1453
- .btn-restore-cmd {
1454
- flex-shrink: 0;
1455
- white-space: nowrap;
1456
- }
1457
-
1458
- /* ── Utility ──────────────────────────────────────────────── */
1459
-
1460
- .hidden { display: none !important; }
1461
-
1462
- .text-muted { color: var(--text-secondary); }
1463
- .text-sm { font-size: 12px; }
1464
- .text-mono { font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px; }
1465
-
1466
- .flex-between { display: flex; align-items: center; justify-content: space-between; }
1467
- .gap-4 { gap: 4px; }
1468
- .mt-2 { margin-top: 8px; }
1469
-
1470
- .copy-toast {
1471
- position: fixed;
1472
- bottom: 28px;
1473
- left: 50%;
1474
- transform: translateX(-50%) translateY(20px);
1475
- background: var(--green);
1476
- color: var(--surface);
1477
- padding: 8px 20px;
1478
- border-radius: var(--radius);
1479
- font-size: 12px;
1480
- font-weight: 700;
1481
- opacity: 0;
1482
- transition: opacity .25s, transform .25s;
1483
- z-index: 200;
1484
- pointer-events: none;
1485
- box-shadow: var(--shadow-soft), 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent);
1486
- }
1487
- .copy-toast.show {
1488
- opacity: 1;
1489
- transform: translateX(-50%) translateY(0);
1490
- }
1491
-
1492
- /* ── Scrollbar ────────────────────────────────────────────── */
1493
-
1494
- ::-webkit-scrollbar { width: 6px; height: 6px; }
1495
- ::-webkit-scrollbar-track { background: transparent; }
1496
- ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
1497
- ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
1498
-
1499
- /* ── Selection ───────────────────────────────────────────── */
1500
-
1501
- ::selection {
1502
- background: color-mix(in srgb, var(--blue) 32%, transparent);
1503
- color: var(--text-heading);
1504
- }
1505
-
1506
- /* ── File Detail Modal ────────────────────────────────────── */
1507
-
1508
- .modal-overlay {
1509
- position: fixed;
1510
- inset: 0;
1511
- background: rgba(0, 0, 0, 0.55);
1512
- z-index: 2000;
1513
- display: none;
1514
- align-items: center;
1515
- justify-content: center;
1516
- backdrop-filter: blur(2px);
1517
- }
1518
- .modal-overlay.active {
1519
- display: flex;
1520
- }
1521
- .file-modal {
1522
- background: linear-gradient(
1523
- 165deg,
1524
- color-mix(in srgb, var(--card-bg) 100%, var(--text-primary)) 0%,
1525
- color-mix(in srgb, var(--card-bg) 96%, transparent) 100%
1526
- );
1527
- border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
1528
- border-radius: var(--radius-lg);
1529
- width: 90vw;
1530
- max-width: 720px;
1531
- max-height: 80vh;
1532
- display: flex;
1533
- flex-direction: column;
1534
- box-shadow: var(--shadow-lg), var(--shadow-soft);
1535
- }
1536
- .file-modal-header {
1537
- display: flex;
1538
- justify-content: space-between;
1539
- align-items: center;
1540
- padding: 14px 20px;
1541
- border-bottom: 1px solid var(--border);
1542
- }
1543
- .file-modal-header h3 {
1544
- margin: 0;
1545
- font-size: 15px;
1546
- font-weight: 600;
1547
- }
1548
- .file-modal-body {
1549
- padding: 16px 20px;
1550
- overflow-y: auto;
1551
- flex: 1;
1552
- }
1553
- .file-modal-body table {
1554
- width: 100%;
1555
- border-collapse: collapse;
1556
- }
1557
- .file-modal-body th,
1558
- .file-modal-body td {
1559
- padding: 6px 10px;
1560
- text-align: left;
1561
- border-bottom: 1px solid var(--border);
1562
- font-size: 12px;
1563
- }
1564
- .file-modal-body th {
1565
- font-weight: 600;
1566
- font-size: 11px;
1567
- text-transform: uppercase;
1568
- letter-spacing: 0.3px;
1569
- color: var(--text-secondary);
1570
- cursor: pointer;
1571
- user-select: none;
1572
- }
1573
- .file-modal-body th:hover {
1574
- color: var(--accent);
1575
- }
1576
- .modal-file-path {
1577
- max-width: 340px;
1578
- overflow: hidden;
1579
- text-overflow: ellipsis;
1580
- white-space: nowrap;
1581
- }
1582
- .modal-file-changes {
1583
- white-space: nowrap;
1584
- }
1585
- .modal-restore-btn {
1586
- padding: 2px 8px;
1587
- font-size: 10px;
1588
- border: 1px solid var(--border);
1589
- border-radius: var(--radius-sm);
1590
- background: var(--bg);
1591
- color: var(--text-secondary);
1592
- cursor: pointer;
1593
- white-space: nowrap;
1594
- transition: all 0.15s;
1595
- }
1596
- .modal-restore-btn:hover {
1597
- background: var(--accent);
1598
- color: #fff;
1599
- border-color: var(--accent);
1600
- }
1601
- .modal-restore-btn.copied {
1602
- background: var(--green);
1603
- color: #fff;
1604
- border-color: var(--green);
1605
- }
1606
- .modal-restore-btn.btn-deleted {
1607
- border-color: var(--orange, #f0ad4e);
1608
- color: var(--orange, #f0ad4e);
1609
- }
1610
- .modal-restore-btn.btn-deleted:hover {
1611
- background: var(--orange, #f0ad4e);
1612
- color: #fff;
1613
- border-color: var(--orange, #f0ad4e);
1614
- }
1615
-
1616
- /* ── Responsive ───────────────────────────────────────────── */
1617
-
1618
- @media (max-width: 768px) {
1619
- #topbar { padding: 0 14px; gap: 8px; }
1620
- .logo-text { display: none; }
1621
- main { padding: 18px 14px 40px; }
1622
- .card-grid { grid-template-columns: 1fr; }
1623
- .card-health { grid-column: auto; }
1624
- .protection-grid { grid-template-columns: 1fr; }
1625
- .stats-row { flex-direction: column; }
1626
- .drawer { width: 100vw; max-width: 100vw; }
1627
- .diag-summary { flex-direction: column; align-items: flex-start; }
1628
- }
1
+ /* ═══════════════════════════════════════════════════════════════
2
+ Cursor Guard Dashboard — theme aligned with IDE sidebar webview
3
+ ═══════════════════════════════════════════════════════════════ */
4
+
5
+ :root {
6
+ /* Core tokens (parity with references/vscode-extension sidebar webview) */
7
+ --surface: #1f2430;
8
+ --surface-2: #252a38;
9
+ --border: rgba(120, 130, 160, 0.22);
10
+ --text: #e8eaf0;
11
+ --muted: #9aa4bd;
12
+ --green: #89d18a;
13
+ --yellow: #e4c06a;
14
+ --red: #f0a0a0;
15
+ --orange: #f0b070;
16
+ --blue: #8eb6ff;
17
+ --purple: #b8a8e8;
18
+ --radius: 12px;
19
+ --radius-sm: 8px;
20
+ --radius-lg: 14px;
21
+ --shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
22
+ --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.12);
23
+ --glow-green: color-mix(in srgb, var(--green) 38%, transparent);
24
+ --shell-green-1: color-mix(in srgb, var(--green) 16%, #070907);
25
+ --shell-green-2: color-mix(in srgb, var(--green) 9%, #050805);
26
+
27
+ /* Legacy names used across this file */
28
+ --bg-primary: var(--surface);
29
+ --bg-secondary: var(--surface-2);
30
+ --bg-tertiary: color-mix(in srgb, var(--surface-2) 88%, var(--text));
31
+ --bg-elevated: color-mix(in srgb, var(--surface-2) 94%, #0a0c12);
32
+ --bg-hover: color-mix(in srgb, var(--text) 6%, transparent);
33
+ --border-subtle: color-mix(in srgb, var(--border) 48%, transparent);
34
+ --border-glow: color-mix(in srgb, var(--blue) 38%, var(--border));
35
+ --text-primary: var(--text);
36
+ --text-secondary: var(--muted);
37
+ --text-tertiary: color-mix(in srgb, var(--muted) 72%, var(--surface));
38
+ --text-heading: var(--text);
39
+ --accent: var(--blue);
40
+
41
+ --green-bg: color-mix(in srgb, var(--green) 14%, transparent);
42
+ --green-glow: color-mix(in srgb, var(--green) 30%, transparent);
43
+ --yellow-bg: color-mix(in srgb, var(--yellow) 14%, transparent);
44
+ --yellow-glow: color-mix(in srgb, var(--yellow) 28%, transparent);
45
+ --red-bg: color-mix(in srgb, var(--red) 14%, transparent);
46
+ --red-glow: color-mix(in srgb, var(--red) 30%, transparent);
47
+ --blue-bg: color-mix(in srgb, var(--blue) 14%, transparent);
48
+ --blue-glow: color-mix(in srgb, var(--blue) 24%, transparent);
49
+ --purple-bg: color-mix(in srgb, var(--purple) 14%, transparent);
50
+ --amber: var(--yellow);
51
+ --amber-bg: var(--yellow-bg);
52
+ --gray: var(--muted);
53
+ --gray-bg: color-mix(in srgb, var(--muted) 12%, transparent);
54
+
55
+ --topbar-h: 52px;
56
+ --drawer-w: 500px;
57
+ --shadow-sm: var(--shadow);
58
+ --shadow-md: var(--shadow-soft);
59
+ --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.22);
60
+ --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
61
+
62
+ --font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
63
+
64
+ --card-bg: var(--bg-secondary);
65
+ --bg: var(--bg-primary);
66
+ }
67
+
68
+ /* ── Reset ────────────────────────────────────────────────── */
69
+
70
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
71
+
72
+ body {
73
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', Roboto, sans-serif;
74
+ font-size: 13px;
75
+ line-height: 1.55;
76
+ color: var(--text-primary);
77
+ background-color: var(--bg-primary);
78
+ background-image:
79
+ radial-gradient(110% 75% at 8% -15%, var(--shell-green-1), transparent 56%),
80
+ radial-gradient(95% 70% at 102% 108%, var(--shell-green-2), transparent 52%),
81
+ linear-gradient(168deg, #0a0c0f 0%, var(--surface) 48%, #0c100e 100%);
82
+ padding-top: var(--topbar-h);
83
+ -webkit-font-smoothing: antialiased;
84
+ -moz-osx-font-smoothing: grayscale;
85
+ }
86
+
87
+ /* ── Top Bar ──────────────────────────────────────────────── */
88
+
89
+ #topbar {
90
+ position: fixed;
91
+ top: 0; left: 0; right: 0;
92
+ height: var(--topbar-h);
93
+ background: color-mix(in srgb, var(--surface-2) 78%, transparent);
94
+ backdrop-filter: blur(12px) saturate(1.2);
95
+ -webkit-backdrop-filter: blur(12px) saturate(1.2);
96
+ border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
97
+ box-shadow: var(--shadow);
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: space-between;
101
+ padding: 0 20px;
102
+ z-index: 50;
103
+ gap: 12px;
104
+ }
105
+
106
+ .topbar-left, .topbar-right {
107
+ display: flex;
108
+ align-items: center;
109
+ gap: 10px;
110
+ }
111
+
112
+ .logo-icon {
113
+ color: var(--green);
114
+ flex-shrink: 0;
115
+ filter: drop-shadow(0 0 8px var(--green-glow));
116
+ }
117
+ .logo-text {
118
+ font-weight: 800;
119
+ font-size: 14px;
120
+ white-space: nowrap;
121
+ letter-spacing: -0.03em;
122
+ line-height: 1.2;
123
+ background: linear-gradient(90deg, var(--text-heading), color-mix(in srgb, var(--text-heading) 72%, var(--blue)));
124
+ -webkit-background-clip: text;
125
+ background-clip: text;
126
+ color: transparent;
127
+ }
128
+
129
+ #project-select {
130
+ background: color-mix(in srgb, var(--surface-2) 88%, var(--text));
131
+ color: var(--text-primary);
132
+ border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
133
+ border-radius: 999px;
134
+ padding: 5px 12px;
135
+ font-size: 12px;
136
+ font-weight: 600;
137
+ max-width: 220px;
138
+ cursor: pointer;
139
+ transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
140
+ }
141
+ #project-select:hover {
142
+ border-color: color-mix(in srgb, var(--blue) 55%, var(--border));
143
+ color: var(--blue);
144
+ box-shadow: var(--shadow-soft);
145
+ }
146
+ #project-select:focus {
147
+ outline: none;
148
+ border-color: color-mix(in srgb, var(--blue) 55%, var(--border));
149
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 35%, transparent);
150
+ }
151
+
152
+ #last-refresh { font-size: 12px; white-space: nowrap; opacity: .7; }
153
+
154
+ /* ── Upgrade Banner ──────────────────────────────────────── */
155
+
156
+ .upgrade-banner {
157
+ position: fixed;
158
+ top: var(--topbar-h);
159
+ left: 0; right: 0;
160
+ background: var(--yellow-bg);
161
+ border-bottom: 1px solid var(--yellow);
162
+ color: var(--yellow);
163
+ padding: 8px 24px;
164
+ font-size: 13px;
165
+ font-weight: 500;
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 12px;
169
+ z-index: 49;
170
+ animation: slideDown 0.3s ease;
171
+ }
172
+ @keyframes slideDown {
173
+ from { transform: translateY(-100%); opacity: 0; }
174
+ to { transform: translateY(0); opacity: 1; }
175
+ }
176
+ .upgrade-banner-text {
177
+ flex: 1;
178
+ }
179
+ .upgrade-banner-restart-btn {
180
+ padding: 4px 14px;
181
+ font-size: 12px;
182
+ font-weight: 600;
183
+ border: 1px solid var(--yellow);
184
+ border-radius: var(--radius-sm);
185
+ background: var(--yellow);
186
+ color: var(--bg);
187
+ cursor: pointer;
188
+ white-space: nowrap;
189
+ transition: all 0.15s;
190
+ }
191
+ .upgrade-banner-restart-btn:hover {
192
+ filter: brightness(1.1);
193
+ }
194
+ .upgrade-banner-restart-btn:disabled {
195
+ opacity: 0.7;
196
+ cursor: wait;
197
+ }
198
+ .upgrade-banner-hint-btn {
199
+ padding: 3px 10px;
200
+ font-size: 11px;
201
+ border: 1px solid var(--yellow);
202
+ border-radius: var(--radius-sm);
203
+ background: transparent;
204
+ color: var(--yellow);
205
+ cursor: pointer;
206
+ white-space: nowrap;
207
+ transition: all 0.15s;
208
+ }
209
+ .upgrade-banner-hint-btn:hover {
210
+ background: var(--yellow);
211
+ color: var(--bg);
212
+ }
213
+ .upgrade-banner-close {
214
+ background: none;
215
+ border: none;
216
+ color: var(--yellow);
217
+ font-size: 18px;
218
+ cursor: pointer;
219
+ padding: 0 4px;
220
+ opacity: 0.7;
221
+ transition: opacity 0.15s;
222
+ }
223
+ .upgrade-banner-close:hover { opacity: 1; }
224
+ .upgrade-banner-hint {
225
+ width: 100%;
226
+ margin-top: 6px;
227
+ padding: 6px 10px;
228
+ background: rgba(0,0,0,0.2);
229
+ border-radius: var(--radius-sm);
230
+ font-size: 12px;
231
+ }
232
+ .upgrade-banner-hint code {
233
+ font-family: var(--font-mono);
234
+ font-size: 11px;
235
+ color: var(--text-primary);
236
+ }
237
+ .upgrade-banner + main {
238
+ margin-top: 38px;
239
+ }
240
+
241
+ /* ── Buttons ──────────────────────────────────────────────── */
242
+
243
+ .btn {
244
+ display: inline-flex;
245
+ align-items: center;
246
+ gap: 6px;
247
+ padding: 8px 12px;
248
+ border: 1px solid var(--border);
249
+ border-radius: var(--radius);
250
+ background: color-mix(in srgb, var(--surface-2) 88%, var(--text));
251
+ color: var(--text-primary);
252
+ font-size: 12px;
253
+ font-weight: 600;
254
+ font-family: inherit;
255
+ cursor: pointer;
256
+ transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
257
+ white-space: nowrap;
258
+ }
259
+ .btn:hover {
260
+ border-color: color-mix(in srgb, var(--blue) 55%, var(--border));
261
+ color: var(--blue);
262
+ box-shadow: var(--shadow-soft);
263
+ }
264
+ .btn:active { transform: scale(0.98); }
265
+
266
+ .btn-ghost {
267
+ background: transparent;
268
+ border-color: color-mix(in srgb, var(--border) 55%, transparent);
269
+ }
270
+ .btn-ghost:hover {
271
+ background: var(--bg-hover);
272
+ border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
273
+ }
274
+
275
+ .btn-sm { padding: 4px 10px; font-size: 12px; }
276
+
277
+ /* ── Main ─────────────────────────────────────────────────── */
278
+
279
+ main {
280
+ max-width: 1120px;
281
+ margin: 0 auto;
282
+ padding: 22px 20px 56px;
283
+ }
284
+
285
+ /* ── Sections ─────────────────────────────────────────────── */
286
+
287
+ .screen { margin-bottom: 44px; }
288
+
289
+ .section-title {
290
+ font-size: 11px;
291
+ font-weight: 700;
292
+ color: var(--muted);
293
+ margin-bottom: 14px;
294
+ letter-spacing: 0.1em;
295
+ text-transform: uppercase;
296
+ }
297
+
298
+ /* ── Card Grid ────────────────────────────────────────────── */
299
+
300
+ .card-grid {
301
+ display: grid;
302
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
303
+ gap: 12px;
304
+ }
305
+
306
+ .card {
307
+ background: linear-gradient(
308
+ 165deg,
309
+ color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
310
+ color-mix(in srgb, var(--bg-secondary) 96%, transparent) 100%
311
+ );
312
+ border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
313
+ border-radius: var(--radius-lg);
314
+ padding: 14px 16px;
315
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
316
+ position: relative;
317
+ overflow: hidden;
318
+ box-shadow: var(--shadow);
319
+ }
320
+ .card:hover {
321
+ transform: translateY(-1px);
322
+ border-color: color-mix(in srgb, var(--border) 70%, var(--blue));
323
+ box-shadow: var(--shadow-soft);
324
+ }
325
+
326
+ .card-health {
327
+ grid-column: 1 / -1;
328
+ display: flex;
329
+ align-items: center;
330
+ gap: 18px;
331
+ flex-wrap: wrap;
332
+ background: linear-gradient(
333
+ 165deg,
334
+ color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
335
+ color-mix(in srgb, var(--bg-elevated) 92%, transparent) 100%
336
+ );
337
+ }
338
+
339
+ .card-label {
340
+ font-size: 10px;
341
+ font-weight: 700;
342
+ text-transform: uppercase;
343
+ letter-spacing: .1em;
344
+ color: var(--text-tertiary);
345
+ margin-bottom: 10px;
346
+ }
347
+
348
+ .card-value {
349
+ font-size: 24px;
350
+ font-weight: 800;
351
+ line-height: 1.15;
352
+ letter-spacing: -.02em;
353
+ color: var(--text-heading);
354
+ }
355
+
356
+ .card-detail { margin-top: 8px; }
357
+
358
+ .card-empty {
359
+ color: var(--text-tertiary);
360
+ font-style: italic;
361
+ font-size: 13px;
362
+ }
363
+
364
+ .card-clickable { cursor: pointer; }
365
+
366
+ /* ── Status indicators ────────────────────────────────────── */
367
+
368
+ .status-dot {
369
+ display: inline-block;
370
+ width: 10px; height: 10px;
371
+ border-radius: 50%;
372
+ margin-right: 8px;
373
+ flex-shrink: 0;
374
+ }
375
+ .status-dot.status-healthy { background: var(--green); box-shadow: 0 0 8px var(--green-glow), 0 0 2px var(--green); animation: pulse-green 2s ease-in-out infinite; }
376
+ .status-dot.status-warning { background: var(--yellow); box-shadow: 0 0 8px var(--yellow-glow), 0 0 2px var(--yellow); animation: pulse-yellow 2s ease-in-out infinite; }
377
+ .status-dot.status-critical { background: var(--red); box-shadow: 0 0 8px var(--red-glow), 0 0 2px var(--red); animation: pulse-red 1.5s ease-in-out infinite; }
378
+ .status-dot.status-unknown { background: var(--gray); opacity: .6; }
379
+ .status-dot.status-running { background: var(--green); box-shadow: 0 0 8px var(--green-glow), 0 0 2px var(--green); animation: pulse-green 2s ease-in-out infinite; }
380
+ .status-dot.status-stopped { background: var(--gray); opacity: .6; }
381
+ .status-dot.status-stale { background: var(--yellow); box-shadow: 0 0 8px var(--yellow-glow); }
382
+
383
+ @keyframes pulse-green { 0%,100%{ box-shadow: 0 0 4px var(--green-glow); } 50%{ box-shadow: 0 0 12px var(--green-glow), 0 0 4px var(--green); } }
384
+ @keyframes pulse-yellow { 0%,100%{ box-shadow: 0 0 4px var(--yellow-glow); } 50%{ box-shadow: 0 0 12px var(--yellow-glow), 0 0 4px var(--yellow); } }
385
+ @keyframes pulse-red { 0%,100%{ box-shadow: 0 0 4px var(--red-glow); } 50%{ box-shadow: 0 0 14px var(--red-glow), 0 0 6px var(--red); } }
386
+
387
+ .card-status {
388
+ display: flex;
389
+ align-items: center;
390
+ font-size: 20px;
391
+ font-weight: 800;
392
+ letter-spacing: -.01em;
393
+ }
394
+
395
+ .status-text.status-healthy { color: var(--green); }
396
+ .status-text.status-warning { color: var(--yellow); }
397
+ .status-text.status-critical { color: var(--red); }
398
+ .status-text.status-unknown { color: var(--gray); }
399
+
400
+ .issue-list {
401
+ list-style: none;
402
+ margin-top: 10px;
403
+ padding-left: 18px;
404
+ }
405
+ .issue-list li {
406
+ position: relative;
407
+ padding: 2px 0;
408
+ font-size: 13px;
409
+ }
410
+ .issue-list li::before {
411
+ content: '';
412
+ position: absolute;
413
+ left: -14px; top: 10px;
414
+ width: 5px; height: 5px;
415
+ border-radius: 50%;
416
+ background: var(--yellow);
417
+ }
418
+
419
+ /* ── Badges ───────────────────────────────────────────────── */
420
+
421
+ .badge {
422
+ display: inline-flex;
423
+ align-items: center;
424
+ padding: 3px 10px;
425
+ border-radius: 12px;
426
+ font-size: 11px;
427
+ font-weight: 600;
428
+ letter-spacing: .02em;
429
+ border: 1px solid transparent;
430
+ }
431
+
432
+ .badge-strategy { background: var(--blue-bg); color: var(--blue); border-color: rgba(59,130,246,.18); }
433
+
434
+ .badge-pass { background: var(--green-bg); color: var(--green); border-color: rgba(74,222,128,.18); }
435
+ .badge-warn { background: var(--yellow-bg); color: var(--yellow); border-color: rgba(245,158,11,.18); }
436
+ .badge-fail { background: var(--red-bg); color: var(--red); border-color: rgba(239,68,68,.18); }
437
+
438
+ .badge-git { background: var(--blue-bg); color: var(--blue); border-color: rgba(59,130,246,.18); }
439
+ .badge-shadow { background: var(--amber-bg); color: var(--amber); border-color: rgba(245,158,11,.18); }
440
+ .badge-pre { background: var(--purple-bg); color: var(--purple); border-color: rgba(167,139,250,.18); }
441
+ .badge-trigger { background: var(--bg-tertiary); color: var(--text-secondary); font-size: 0.7rem; border-color: var(--border-subtle); }
442
+ .badge-intent { background: var(--blue-bg); color: var(--blue); font-size: 0.7rem; border-color: rgba(59,130,246,.18); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
443
+
444
+ .backup-summary-cell { max-width: 420px; min-width: 180px; }
445
+ .summary-meta {
446
+ display: flex;
447
+ flex-wrap: wrap;
448
+ align-items: baseline;
449
+ gap: 8px 12px;
450
+ }
451
+ .summary-line-delta {
452
+ font-size: 12px;
453
+ font-weight: 700;
454
+ font-variant-numeric: tabular-nums;
455
+ color: var(--muted);
456
+ letter-spacing: 0.02em;
457
+ }
458
+ .summary-file-row .text-muted {
459
+ font-weight: 600;
460
+ }
461
+ .backup-meta-cell { max-width: 220px; min-width: 140px; vertical-align: top; }
462
+ .backup-human-meta { display: flex; flex-direction: column; gap: 3px; font-size: 11px; line-height: 1.35; color: var(--text-secondary); }
463
+ .backup-meta-line { display: block; }
464
+
465
+ .summary-stack { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
466
+ .summary-files {
467
+ font-size: 13px;
468
+ font-weight: 700;
469
+ color: var(--text-heading);
470
+ font-variant-numeric: tabular-nums;
471
+ }
472
+ .summary-guard-event {
473
+ font-size: 12px;
474
+ color: var(--orange);
475
+ background: color-mix(in srgb, var(--orange) 14%, transparent);
476
+ padding: 4px 10px;
477
+ border-radius: 4px;
478
+ border-left: 3px solid var(--orange);
479
+ overflow: hidden;
480
+ text-overflow: ellipsis;
481
+ white-space: nowrap;
482
+ max-width: 420px;
483
+ line-height: 1.4;
484
+ margin-bottom: 4px;
485
+ }
486
+ .summary-guard-event-label {
487
+ font-weight: 600;
488
+ opacity: 0.85;
489
+ }
490
+ .summary-bookmark-row { margin-bottom: 4px; }
491
+ .summary-bookmark-badge {
492
+ display: inline-block;
493
+ font-size: 11px;
494
+ font-weight: 700;
495
+ letter-spacing: 0.04em;
496
+ text-transform: uppercase;
497
+ color: var(--purple);
498
+ background: var(--purple-bg);
499
+ padding: 3px 8px;
500
+ border-radius: 4px;
501
+ border-left: 3px solid var(--purple);
502
+ line-height: 1.35;
503
+ }
504
+ .summary-intent {
505
+ font-size: 12px;
506
+ color: var(--blue);
507
+ background: var(--blue-bg);
508
+ padding: 4px 10px;
509
+ border-radius: 4px;
510
+ border-left: 3px solid var(--blue);
511
+ overflow: hidden;
512
+ text-overflow: ellipsis;
513
+ white-space: nowrap;
514
+ max-width: 400px;
515
+ line-height: 1.4;
516
+ }
517
+ .summary-intent-label {
518
+ font-weight: 600;
519
+ opacity: 0.7;
520
+ }
521
+ .summary-trigger {
522
+ font-size: 11px;
523
+ padding: 2px 0;
524
+ }
525
+ .summary-restore-ctx {
526
+ font-size: 12px;
527
+ color: var(--amber);
528
+ background: var(--amber-bg);
529
+ padding: 4px 10px;
530
+ border-radius: 4px;
531
+ border-left: 3px solid var(--amber);
532
+ overflow: hidden;
533
+ text-overflow: ellipsis;
534
+ white-space: nowrap;
535
+ max-width: 400px;
536
+ line-height: 1.4;
537
+ }
538
+ .summary-message {
539
+ font-size: 12px;
540
+ color: var(--text-primary);
541
+ background: var(--bg-tertiary);
542
+ padding: 3px 8px;
543
+ border-radius: 3px;
544
+ border-left: 3px solid var(--text-tertiary);
545
+ overflow: hidden;
546
+ text-overflow: ellipsis;
547
+ white-space: nowrap;
548
+ max-width: 400px;
549
+ line-height: 1.4;
550
+ }
551
+ .summary-detail-line {
552
+ font-size: 12px;
553
+ color: var(--text-secondary);
554
+ font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
555
+ line-height: 1.5;
556
+ padding: 1px 0;
557
+ overflow: hidden;
558
+ text-overflow: ellipsis;
559
+ white-space: nowrap;
560
+ max-width: 400px;
561
+ }
562
+ .summary-detail-line:first-child { padding-top: 2px; }
563
+
564
+ .summary-collapsed {
565
+ display: none;
566
+ }
567
+ .summary-expanded .summary-collapsed {
568
+ display: block;
569
+ }
570
+ .summary-toggle-btn {
571
+ background: none;
572
+ border: none;
573
+ color: var(--blue);
574
+ font-size: 11px;
575
+ font-weight: 600;
576
+ cursor: pointer;
577
+ padding: 2px 0;
578
+ transition: color var(--transition);
579
+ }
580
+ .summary-toggle-btn:hover { color: var(--text-heading); }
581
+ .summary-expanded .summary-toggle-btn { display: none; }
582
+
583
+ .summary-pre {
584
+ font-size: 12px;
585
+ line-height: 1.6;
586
+ white-space: pre-wrap;
587
+ margin: 0;
588
+ padding: 8px 10px;
589
+ background: var(--bg-tertiary);
590
+ border-radius: 4px;
591
+ border-left: 3px solid var(--blue);
592
+ }
593
+
594
+ /* ── Summary inline file rows ────────────────────────────── */
595
+
596
+ .summary-file-row {
597
+ display: flex;
598
+ align-items: center;
599
+ gap: 6px;
600
+ padding: 1px 0;
601
+ font-size: 11px;
602
+ line-height: 1.4;
603
+ }
604
+ .summary-file-path {
605
+ flex: 1;
606
+ overflow: hidden;
607
+ text-overflow: ellipsis;
608
+ white-space: nowrap;
609
+ max-width: 220px;
610
+ font-size: 11px;
611
+ color: var(--text-primary);
612
+ }
613
+ .summary-file-more {
614
+ padding: 2px 0;
615
+ font-style: italic;
616
+ }
617
+
618
+ /* ── Stats Row ────────────────────────────────────────────── */
619
+
620
+ .stats-row {
621
+ display: flex;
622
+ flex-wrap: wrap;
623
+ gap: 14px;
624
+ margin-bottom: 18px;
625
+ }
626
+
627
+ .stat-card {
628
+ background: linear-gradient(
629
+ 165deg,
630
+ color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
631
+ color-mix(in srgb, var(--bg-secondary) 96%, transparent) 100%
632
+ );
633
+ border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
634
+ border-radius: var(--radius-lg);
635
+ padding: 12px 16px;
636
+ min-width: 150px;
637
+ flex: 1;
638
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
639
+ box-shadow: var(--shadow);
640
+ }
641
+ .stat-card:hover {
642
+ border-color: color-mix(in srgb, var(--border) 70%, var(--blue));
643
+ box-shadow: var(--shadow-soft);
644
+ }
645
+ .stat-label {
646
+ font-size: 10px;
647
+ font-weight: 700;
648
+ text-transform: uppercase;
649
+ letter-spacing: .08em;
650
+ color: var(--text-tertiary);
651
+ margin-bottom: 6px;
652
+ }
653
+ .stat-value {
654
+ font-size: 22px;
655
+ font-weight: 800;
656
+ letter-spacing: -.02em;
657
+ color: var(--text-heading);
658
+ }
659
+
660
+ /* ── Filter Bar ───────────────────────────────────────────── */
661
+
662
+ .filter-bar {
663
+ display: flex;
664
+ flex-wrap: wrap;
665
+ gap: 8px;
666
+ margin-bottom: 14px;
667
+ }
668
+
669
+ .filter-btn {
670
+ padding: 5px 14px;
671
+ border: 1px solid var(--border);
672
+ border-radius: 16px;
673
+ background: transparent;
674
+ color: var(--text-secondary);
675
+ font-size: 12px;
676
+ font-weight: 500;
677
+ cursor: pointer;
678
+ transition: all var(--transition);
679
+ }
680
+ .filter-btn:hover {
681
+ background: var(--bg-hover);
682
+ color: var(--text-primary);
683
+ border-color: rgba(100,116,139,.3);
684
+ }
685
+ .filter-btn.active {
686
+ background: var(--blue-bg);
687
+ color: var(--blue);
688
+ border-color: color-mix(in srgb, var(--blue) 42%, var(--border));
689
+ font-weight: 600;
690
+ }
691
+
692
+ /* ── Table ────────────────────────────────────────────────── */
693
+
694
+ .table-wrap {
695
+ background: linear-gradient(
696
+ 165deg,
697
+ color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
698
+ color-mix(in srgb, var(--bg-secondary) 97%, transparent) 100%
699
+ );
700
+ border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
701
+ border-radius: var(--radius-lg);
702
+ overflow: auto;
703
+ max-height: 440px;
704
+ box-shadow: var(--shadow);
705
+ }
706
+
707
+ .data-table {
708
+ width: 100%;
709
+ border-collapse: collapse;
710
+ font-size: 13px;
711
+ }
712
+ .data-table th {
713
+ text-align: left;
714
+ padding: 12px 16px;
715
+ font-weight: 700;
716
+ font-size: 10px;
717
+ text-transform: uppercase;
718
+ letter-spacing: .08em;
719
+ color: var(--text-tertiary);
720
+ border-bottom: 1px solid var(--border);
721
+ position: sticky;
722
+ top: 0;
723
+ background: var(--bg-elevated);
724
+ z-index: 2;
725
+ }
726
+ .data-table td {
727
+ padding: 10px 16px;
728
+ border-bottom: 1px solid var(--border-subtle);
729
+ vertical-align: top;
730
+ }
731
+ .data-table tbody tr {
732
+ cursor: pointer;
733
+ transition: background var(--transition);
734
+ }
735
+ .data-table tbody tr:hover {
736
+ background: color-mix(in srgb, var(--blue) 6%, transparent);
737
+ }
738
+ .data-table tbody tr:nth-child(even) {
739
+ background: color-mix(in srgb, var(--text-primary) 2.5%, transparent);
740
+ }
741
+ .data-table tbody tr:nth-child(even):hover {
742
+ background: color-mix(in srgb, var(--blue) 6%, transparent);
743
+ }
744
+
745
+ /* ── Protection ───────────────────────────────────────────── */
746
+
747
+ .protection-grid {
748
+ display: grid;
749
+ grid-template-columns: 1fr 1fr;
750
+ gap: 16px;
751
+ }
752
+
753
+ .pattern-card {
754
+ background: linear-gradient(
755
+ 165deg,
756
+ color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
757
+ color-mix(in srgb, var(--bg-secondary) 96%, transparent) 100%
758
+ );
759
+ border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
760
+ border-radius: var(--radius-lg);
761
+ padding: 16px;
762
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
763
+ box-shadow: var(--shadow);
764
+ }
765
+ .pattern-card:hover {
766
+ box-shadow: var(--shadow-soft);
767
+ }
768
+ .pattern-card--protect {
769
+ border-color: color-mix(in srgb, var(--green) 34%, var(--border));
770
+ background: linear-gradient(
771
+ 165deg,
772
+ color-mix(in srgb, var(--green) 9%, var(--bg-secondary)) 0%,
773
+ color-mix(in srgb, var(--bg-secondary) 98%, var(--text-primary)) 100%
774
+ );
775
+ }
776
+ .pattern-card--protect:hover {
777
+ border-color: color-mix(in srgb, var(--green) 48%, var(--border));
778
+ }
779
+ .pattern-card--ignore {
780
+ border-color: color-mix(in srgb, var(--muted) 26%, var(--border));
781
+ background: linear-gradient(
782
+ 165deg,
783
+ color-mix(in srgb, var(--muted) 7%, var(--bg-secondary)) 0%,
784
+ color-mix(in srgb, var(--bg-secondary) 98%, var(--text-primary)) 100%
785
+ );
786
+ }
787
+ .pattern-card--ignore:hover {
788
+ border-color: color-mix(in srgb, var(--muted) 38%, var(--border));
789
+ }
790
+ .pattern-card h4 {
791
+ font-size: 10px;
792
+ font-weight: 700;
793
+ text-transform: uppercase;
794
+ letter-spacing: .1em;
795
+ margin-bottom: 12px;
796
+ }
797
+ .pattern-card--protect h4 { color: var(--green); }
798
+ .pattern-card--ignore h4 { color: color-mix(in srgb, var(--muted) 88%, var(--text)); }
799
+
800
+ .pattern-empty {
801
+ margin: 0;
802
+ line-height: 1.5;
803
+ }
804
+ .pattern-empty--protect { color: color-mix(in srgb, var(--green) 65%, var(--muted)); }
805
+ .pattern-empty--ignore { color: color-mix(in srgb, var(--muted) 95%, var(--text)); }
806
+
807
+ .pattern-list {
808
+ list-style: none;
809
+ display: flex;
810
+ flex-wrap: wrap;
811
+ gap: 8px;
812
+ }
813
+ .pattern-item {
814
+ font-family: var(--font-mono);
815
+ font-size: 11px;
816
+ padding: 5px 10px;
817
+ border-radius: 8px;
818
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
819
+ }
820
+ .pattern-item--protect {
821
+ color: color-mix(in srgb, var(--green) 90%, #fff);
822
+ background: color-mix(in srgb, var(--green) 13%, var(--bg-tertiary));
823
+ border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
824
+ box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 8%, transparent);
825
+ }
826
+ .pattern-item--protect:hover {
827
+ border-color: color-mix(in srgb, var(--green) 58%, transparent);
828
+ box-shadow: var(--shadow-soft);
829
+ }
830
+ .pattern-item--ignore {
831
+ color: color-mix(in srgb, var(--muted) 96%, var(--text));
832
+ background: color-mix(in srgb, var(--muted) 11%, var(--bg-tertiary));
833
+ border: 1px solid color-mix(in srgb, var(--muted) 32%, var(--border));
834
+ }
835
+ .pattern-item--ignore:hover {
836
+ border-color: color-mix(in srgb, var(--muted) 50%, var(--border));
837
+ }
838
+
839
+ .protection-note {
840
+ margin-top: 16px;
841
+ font-size: 12px;
842
+ color: var(--text-tertiary);
843
+ font-style: italic;
844
+ line-height: 1.5;
845
+ }
846
+
847
+ .protection-count {
848
+ margin-top: 14px;
849
+ font-size: 14px;
850
+ font-weight: 700;
851
+ color: var(--text-heading);
852
+ }
853
+
854
+ /* ── Diagnostics Summary ──────────────────────────────────── */
855
+
856
+ .diag-summary {
857
+ background: linear-gradient(
858
+ 165deg,
859
+ color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
860
+ color-mix(in srgb, var(--bg-elevated) 94%, transparent) 100%
861
+ );
862
+ border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
863
+ border-radius: var(--radius-lg);
864
+ padding: 18px 22px;
865
+ display: flex;
866
+ align-items: center;
867
+ gap: 24px;
868
+ cursor: pointer;
869
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
870
+ box-shadow: var(--shadow);
871
+ }
872
+ .diag-summary:hover {
873
+ transform: translateY(-1px);
874
+ box-shadow: var(--shadow-soft);
875
+ border-color: color-mix(in srgb, var(--border) 70%, var(--blue));
876
+ }
877
+
878
+ .diag-counts {
879
+ display: flex;
880
+ gap: 16px;
881
+ }
882
+ .diag-count {
883
+ text-align: center;
884
+ min-width: 48px;
885
+ }
886
+ .diag-count .num {
887
+ font-size: 26px;
888
+ font-weight: 800;
889
+ display: block;
890
+ letter-spacing: -.02em;
891
+ }
892
+ .diag-count .label {
893
+ font-size: 10px;
894
+ font-weight: 600;
895
+ text-transform: uppercase;
896
+ letter-spacing: .06em;
897
+ }
898
+
899
+ .diag-hint {
900
+ margin-left: auto;
901
+ font-size: 12px;
902
+ color: var(--text-tertiary);
903
+ opacity: .7;
904
+ }
905
+
906
+ /* ── Drawer ───────────────────────────────────────────────── */
907
+
908
+ .drawer-overlay {
909
+ position: fixed;
910
+ inset: 0;
911
+ background: rgba(0,0,0,.6);
912
+ backdrop-filter: blur(4px);
913
+ z-index: 100;
914
+ opacity: 0;
915
+ visibility: hidden;
916
+ transition: opacity .25s, visibility .25s;
917
+ }
918
+ .drawer-overlay.active {
919
+ opacity: 1;
920
+ visibility: visible;
921
+ }
922
+
923
+ .drawer {
924
+ position: fixed;
925
+ top: 0; right: 0; bottom: 0;
926
+ width: var(--drawer-w);
927
+ max-width: 92vw;
928
+ background: linear-gradient(
929
+ 180deg,
930
+ color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
931
+ var(--bg-primary) 100%
932
+ );
933
+ border-left: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
934
+ box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
935
+ z-index: 101;
936
+ display: flex;
937
+ flex-direction: column;
938
+ transform: translateX(100%);
939
+ visibility: hidden;
940
+ transition: transform .3s cubic-bezier(.32,.72,0,1), visibility .3s;
941
+ }
942
+ .drawer.active {
943
+ transform: translateX(0);
944
+ visibility: visible;
945
+ }
946
+
947
+ .drawer-header {
948
+ display: flex;
949
+ align-items: center;
950
+ justify-content: space-between;
951
+ padding: 18px 24px;
952
+ border-bottom: 1px solid var(--border);
953
+ }
954
+ .drawer-header h3 {
955
+ font-size: 15px;
956
+ font-weight: 700;
957
+ color: var(--text-heading);
958
+ }
959
+
960
+ .drawer-close {
961
+ background: none;
962
+ border: none;
963
+ color: var(--text-tertiary);
964
+ font-size: 24px;
965
+ cursor: pointer;
966
+ padding: 0 4px;
967
+ line-height: 1;
968
+ transition: color var(--transition);
969
+ border-radius: 4px;
970
+ }
971
+ .drawer-close:hover { color: var(--text-primary); background: var(--bg-hover); }
972
+
973
+ .drawer-body {
974
+ flex: 1;
975
+ overflow-y: auto;
976
+ padding: 24px;
977
+ }
978
+
979
+ /* ── Drawer: Restore Point ────────────────────────────────── */
980
+
981
+ .restore-field {
982
+ margin-bottom: 16px;
983
+ }
984
+ .restore-field-label {
985
+ font-size: 10px;
986
+ font-weight: 700;
987
+ text-transform: uppercase;
988
+ letter-spacing: .08em;
989
+ color: var(--text-tertiary);
990
+ margin-bottom: 4px;
991
+ }
992
+ .restore-field-value {
993
+ font-size: 14px;
994
+ word-break: break-all;
995
+ line-height: 1.5;
996
+ }
997
+
998
+ .restore-actions {
999
+ display: flex;
1000
+ gap: 8px;
1001
+ margin-top: 24px;
1002
+ padding-top: 18px;
1003
+ border-top: 1px solid var(--border);
1004
+ }
1005
+
1006
+ .json-preview {
1007
+ margin-top: 16px;
1008
+ padding: 14px;
1009
+ background: var(--bg-primary);
1010
+ border: 1px solid var(--border-subtle);
1011
+ border-radius: var(--radius-sm);
1012
+ font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1013
+ font-size: 12px;
1014
+ white-space: pre-wrap;
1015
+ word-break: break-all;
1016
+ max-height: 300px;
1017
+ overflow: auto;
1018
+ color: var(--text-secondary);
1019
+ line-height: 1.6;
1020
+ }
1021
+
1022
+ /* ── Drawer: Files Table ──────────────────────────────────── */
1023
+
1024
+ .drawer-files-container {
1025
+ margin-top: 6px;
1026
+ max-height: 340px;
1027
+ overflow: auto;
1028
+ border: 1px solid var(--border-subtle);
1029
+ border-radius: var(--radius-sm);
1030
+ }
1031
+ .drawer-files-loading {
1032
+ padding: 16px;
1033
+ text-align: center;
1034
+ }
1035
+ .drawer-files-table {
1036
+ width: 100%;
1037
+ border-collapse: collapse;
1038
+ font-size: 12px;
1039
+ }
1040
+ .drawer-files-table th {
1041
+ text-align: left;
1042
+ padding: 8px 12px;
1043
+ font-size: 10px;
1044
+ font-weight: 700;
1045
+ text-transform: uppercase;
1046
+ letter-spacing: .06em;
1047
+ color: var(--text-tertiary);
1048
+ border-bottom: 1px solid var(--border-subtle);
1049
+ background: var(--bg-elevated);
1050
+ position: sticky;
1051
+ top: 0;
1052
+ z-index: 1;
1053
+ }
1054
+ .drawer-sort-header { cursor: pointer; transition: color var(--transition); }
1055
+ .drawer-sort-header:hover { color: var(--blue); }
1056
+ .drawer-files-table td {
1057
+ padding: 5px 12px;
1058
+ border-bottom: 1px solid rgba(71,85,105,.15);
1059
+ vertical-align: middle;
1060
+ }
1061
+ .drawer-file-path {
1062
+ max-width: 280px;
1063
+ overflow: hidden;
1064
+ text-overflow: ellipsis;
1065
+ white-space: nowrap;
1066
+ color: var(--text-primary);
1067
+ }
1068
+ .drawer-file-changes {
1069
+ white-space: nowrap;
1070
+ font-variant-numeric: tabular-nums;
1071
+ color: var(--text-secondary);
1072
+ }
1073
+
1074
+ /* ── Drawer: Doctor Checks ────────────────────────────────── */
1075
+
1076
+ .check-item {
1077
+ border-bottom: 1px solid var(--border-subtle);
1078
+ }
1079
+ .check-item:last-child { border-bottom: none; }
1080
+
1081
+ .check-item summary {
1082
+ display: flex;
1083
+ align-items: center;
1084
+ gap: 10px;
1085
+ padding: 12px 0;
1086
+ cursor: pointer;
1087
+ list-style: none;
1088
+ font-size: 13px;
1089
+ transition: color var(--transition);
1090
+ }
1091
+ .check-item summary:hover { color: var(--text-heading); }
1092
+ .check-item summary::-webkit-details-marker { display: none; }
1093
+ .check-item summary::before {
1094
+ content: '▸';
1095
+ font-size: 10px;
1096
+ color: var(--text-tertiary);
1097
+ transition: transform .2s ease;
1098
+ width: 14px;
1099
+ text-align: center;
1100
+ flex-shrink: 0;
1101
+ }
1102
+ .check-item[open] summary::before { transform: rotate(90deg); }
1103
+
1104
+ .check-name { flex: 1; font-weight: 500; }
1105
+ .check-detail {
1106
+ padding: 0 0 12px 24px;
1107
+ font-size: 12px;
1108
+ color: var(--text-secondary);
1109
+ line-height: 1.6;
1110
+ }
1111
+
1112
+ /* ── State panels ─────────────────────────────────────────── */
1113
+
1114
+ .state-panel {
1115
+ display: flex;
1116
+ flex-direction: column;
1117
+ align-items: center;
1118
+ justify-content: center;
1119
+ min-height: 320px;
1120
+ text-align: center;
1121
+ color: var(--text-secondary);
1122
+ }
1123
+
1124
+ .error-icon {
1125
+ font-size: 40px;
1126
+ margin-bottom: 14px;
1127
+ color: var(--yellow);
1128
+ filter: drop-shadow(0 0 8px var(--yellow-glow));
1129
+ }
1130
+
1131
+ .error-panel {
1132
+ text-align: center;
1133
+ padding: 48px 24px;
1134
+ color: var(--text-tertiary);
1135
+ }
1136
+ .error-panel .error-icon { font-size: 32px; margin-bottom: 10px; }
1137
+
1138
+ .empty-state {
1139
+ text-align: center;
1140
+ padding: 36px 20px;
1141
+ color: var(--text-tertiary);
1142
+ font-style: italic;
1143
+ }
1144
+
1145
+ /* ── Spinner ──────────────────────────────────────────────── */
1146
+
1147
+ .spinner {
1148
+ width: 36px; height: 36px;
1149
+ border: 3px solid var(--border);
1150
+ border-top-color: var(--blue);
1151
+ border-radius: 50%;
1152
+ animation: spin .7s linear infinite;
1153
+ margin-bottom: 14px;
1154
+ }
1155
+ @keyframes spin { to { transform: rotate(360deg); } }
1156
+
1157
+ .icon-spin-active { animation: spin .6s linear infinite; }
1158
+
1159
+ /* ── Skeleton loading ────────────────────────────────────── */
1160
+
1161
+ @keyframes shimmer {
1162
+ 0% { background-position: -200% 0; }
1163
+ 100% { background-position: 200% 0; }
1164
+ }
1165
+
1166
+ .skeleton-block {
1167
+ height: 48px;
1168
+ border-radius: var(--radius-sm);
1169
+ background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
1170
+ background-size: 200% 100%;
1171
+ animation: shimmer 1.5s ease-in-out infinite;
1172
+ }
1173
+
1174
+ .skeleton-row {
1175
+ display: flex;
1176
+ gap: 12px;
1177
+ }
1178
+ .skeleton-row::before,
1179
+ .skeleton-row::after {
1180
+ content: '';
1181
+ flex: 1;
1182
+ height: 64px;
1183
+ border-radius: var(--radius-sm);
1184
+ background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
1185
+ background-size: 200% 100%;
1186
+ animation: shimmer 1.5s ease-in-out infinite;
1187
+ }
1188
+
1189
+ .skeleton-table {
1190
+ display: flex;
1191
+ flex-direction: column;
1192
+ gap: 8px;
1193
+ padding: 12px 0;
1194
+ }
1195
+ .skeleton-table::before,
1196
+ .skeleton-table::after {
1197
+ content: '';
1198
+ display: block;
1199
+ height: 36px;
1200
+ border-radius: var(--radius-sm);
1201
+ background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
1202
+ background-size: 200% 100%;
1203
+ animation: shimmer 1.5s ease-in-out infinite;
1204
+ }
1205
+ .skeleton-table::after { width: 75%; opacity: .6; }
1206
+
1207
+ /* ── Alert Card Details ───────────────────────────────────── */
1208
+
1209
+ .alert-details {
1210
+ margin-top: 10px;
1211
+ display: flex;
1212
+ flex-direction: column;
1213
+ gap: 6px;
1214
+ }
1215
+ .alert-detail-row {
1216
+ display: flex;
1217
+ align-items: center;
1218
+ gap: 8px;
1219
+ font-size: 12px;
1220
+ color: var(--text-secondary);
1221
+ }
1222
+ .alert-detail-label {
1223
+ font-weight: 600;
1224
+ color: var(--text-tertiary);
1225
+ min-width: 72px;
1226
+ font-size: 10px;
1227
+ text-transform: uppercase;
1228
+ letter-spacing: .06em;
1229
+ }
1230
+ .alert-countdown {
1231
+ color: var(--yellow);
1232
+ font-weight: 700;
1233
+ font-variant-numeric: tabular-nums;
1234
+ }
1235
+ .alert-numbers {
1236
+ margin-top: 4px;
1237
+ font-size: 13px;
1238
+ font-weight: 600;
1239
+ color: var(--yellow);
1240
+ background: var(--yellow-bg);
1241
+ padding: 6px 12px;
1242
+ border-radius: var(--radius-sm);
1243
+ border-left: 3px solid var(--yellow);
1244
+ }
1245
+
1246
+ .alert-breakdown {
1247
+ color: var(--text-secondary);
1248
+ font-weight: 500;
1249
+ padding: 2px 12px;
1250
+ }
1251
+ .alert-suggestion {
1252
+ padding: 4px 12px;
1253
+ font-style: italic;
1254
+ }
1255
+ .alert-history-breakdown {
1256
+ display: block;
1257
+ font-size: 10px;
1258
+ color: var(--text-tertiary);
1259
+ margin-top: 1px;
1260
+ }
1261
+
1262
+ .alert-history-toggle-wrap {
1263
+ margin-top: 8px;
1264
+ }
1265
+ .alert-history-toggle-btn {
1266
+ background: none;
1267
+ border: none;
1268
+ color: var(--text-tertiary);
1269
+ font-size: 11px;
1270
+ cursor: pointer;
1271
+ padding: 2px 0;
1272
+ transition: color var(--transition);
1273
+ }
1274
+ .alert-history-toggle-btn:hover { color: var(--blue); }
1275
+
1276
+ .alert-history {
1277
+ margin-top: 8px;
1278
+ border-top: 1px solid var(--border-subtle);
1279
+ padding-top: 8px;
1280
+ }
1281
+ .alert-history.alert-history-collapsed { display: none; }
1282
+ .alert-history-label {
1283
+ font-size: 10px;
1284
+ font-weight: 700;
1285
+ text-transform: uppercase;
1286
+ letter-spacing: .06em;
1287
+ color: var(--text-tertiary);
1288
+ margin-bottom: 6px;
1289
+ }
1290
+ .alert-history-row {
1291
+ display: flex;
1292
+ align-items: center;
1293
+ gap: 8px;
1294
+ padding: 3px 0;
1295
+ font-size: 11px;
1296
+ }
1297
+ .badge-expired {
1298
+ background: var(--gray-bg);
1299
+ color: var(--gray);
1300
+ border-color: rgba(100,116,139,.18);
1301
+ font-size: 9px;
1302
+ padding: 1px 6px;
1303
+ }
1304
+
1305
+ /* ── Alert Files Table ───────────────────────────────────── */
1306
+
1307
+ .alert-files-section {
1308
+ margin-top: 10px;
1309
+ border-top: 1px solid var(--border-subtle);
1310
+ padding-top: 8px;
1311
+ }
1312
+ .alert-files-toggle {
1313
+ background: none;
1314
+ border: none;
1315
+ color: var(--blue);
1316
+ font-size: 11px;
1317
+ font-weight: 600;
1318
+ cursor: pointer;
1319
+ padding: 2px 0;
1320
+ transition: color var(--transition);
1321
+ }
1322
+ .alert-files-toggle:hover { color: var(--text-heading); }
1323
+
1324
+ .alert-card-actions {
1325
+ margin-top: 10px;
1326
+ border-top: 1px solid var(--border-subtle);
1327
+ padding-top: 10px;
1328
+ display: flex;
1329
+ flex-wrap: wrap;
1330
+ align-items: center;
1331
+ gap: 10px 14px;
1332
+ }
1333
+ .alert-card-actions .alert-files-section {
1334
+ margin-top: 0;
1335
+ border-top: none;
1336
+ padding-top: 0;
1337
+ flex: 1 1 auto;
1338
+ min-width: 0;
1339
+ }
1340
+ .btn-alert-dismiss {
1341
+ border: 1px solid var(--border-subtle);
1342
+ border-radius: var(--radius-sm);
1343
+ background: color-mix(in srgb, var(--surface-2) 90%, var(--muted));
1344
+ color: var(--text-secondary);
1345
+ font: inherit;
1346
+ font-size: 12px;
1347
+ font-weight: 600;
1348
+ padding: 6px 12px;
1349
+ cursor: pointer;
1350
+ transition: border-color var(--transition), color var(--transition), background var(--transition);
1351
+ }
1352
+ .btn-alert-dismiss:hover:not(:disabled) {
1353
+ border-color: color-mix(in srgb, var(--muted) 40%, var(--border));
1354
+ color: var(--text-primary);
1355
+ }
1356
+ .btn-alert-dismiss:disabled {
1357
+ opacity: 0.65;
1358
+ cursor: not-allowed;
1359
+ }
1360
+
1361
+ .alert-files-table-wrap {
1362
+ margin-top: 8px;
1363
+ max-height: 220px;
1364
+ overflow: auto;
1365
+ border: 1px solid var(--border-subtle);
1366
+ border-radius: var(--radius-sm);
1367
+ }
1368
+ .alert-files-hidden { display: none; }
1369
+
1370
+ .alert-files-table {
1371
+ width: 100%;
1372
+ border-collapse: collapse;
1373
+ font-size: 11px;
1374
+ }
1375
+ .alert-files-table th {
1376
+ text-align: left;
1377
+ padding: 6px 10px;
1378
+ font-size: 9px;
1379
+ font-weight: 700;
1380
+ text-transform: uppercase;
1381
+ letter-spacing: .06em;
1382
+ color: var(--text-tertiary);
1383
+ border-bottom: 1px solid var(--border-subtle);
1384
+ background: var(--bg-elevated);
1385
+ position: sticky;
1386
+ top: 0;
1387
+ z-index: 1;
1388
+ }
1389
+ .alert-files-table td {
1390
+ padding: 4px 10px;
1391
+ border-bottom: 1px solid rgba(71,85,105,.15);
1392
+ vertical-align: middle;
1393
+ }
1394
+ .alert-file-path {
1395
+ max-width: 240px;
1396
+ overflow: hidden;
1397
+ text-overflow: ellipsis;
1398
+ white-space: nowrap;
1399
+ color: var(--text-primary);
1400
+ }
1401
+ .alert-file-changes {
1402
+ white-space: nowrap;
1403
+ font-variant-numeric: tabular-nums;
1404
+ color: var(--text-secondary);
1405
+ }
1406
+
1407
+ .alert-action-badge {
1408
+ display: inline-block;
1409
+ padding: 1px 6px;
1410
+ border-radius: 8px;
1411
+ font-size: 9px;
1412
+ font-weight: 600;
1413
+ letter-spacing: .02em;
1414
+ }
1415
+ .alert-action-modified { background: var(--blue-bg); color: var(--blue); }
1416
+ .alert-action-added { background: var(--green-bg); color: var(--green); }
1417
+ .alert-action-deleted { background: var(--red-bg); color: var(--red); }
1418
+ .alert-action-renamed { background: var(--purple-bg); color: var(--purple); }
1419
+
1420
+ /* ── File Search ─────────────────────────────────────────── */
1421
+
1422
+ .file-search-wrap {
1423
+ margin-bottom: 12px;
1424
+ }
1425
+ .file-search-input {
1426
+ width: 100%;
1427
+ max-width: 360px;
1428
+ background: var(--bg-secondary);
1429
+ color: var(--text-primary);
1430
+ border: 1px solid var(--border);
1431
+ border-radius: var(--radius-sm);
1432
+ padding: 8px 14px;
1433
+ font-size: 13px;
1434
+ font-family: inherit;
1435
+ transition: border-color var(--transition);
1436
+ }
1437
+ .file-search-input::placeholder { color: var(--text-tertiary); }
1438
+ .file-search-input:focus {
1439
+ outline: none;
1440
+ border-color: var(--blue);
1441
+ box-shadow: 0 0 0 3px var(--blue-bg);
1442
+ }
1443
+
1444
+ /* ── Filter Count ────────────────────────────────────────── */
1445
+
1446
+ .filter-count {
1447
+ font-size: 10px;
1448
+ opacity: .65;
1449
+ font-weight: 400;
1450
+ }
1451
+
1452
+ /* ── Restore Command Section ─────────────────────────────── */
1453
+
1454
+ .restore-cmd-section {
1455
+ margin-top: 18px;
1456
+ padding-top: 16px;
1457
+ border-top: 1px solid var(--border);
1458
+ }
1459
+ .restore-cmd-label {
1460
+ font-size: 10px;
1461
+ font-weight: 700;
1462
+ text-transform: uppercase;
1463
+ letter-spacing: .08em;
1464
+ color: var(--text-tertiary);
1465
+ margin-bottom: 10px;
1466
+ }
1467
+ .restore-cmd-row {
1468
+ display: flex;
1469
+ align-items: center;
1470
+ gap: 8px;
1471
+ margin-bottom: 8px;
1472
+ }
1473
+ .restore-cmd-code {
1474
+ flex: 1;
1475
+ font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1476
+ font-size: 11px;
1477
+ background: var(--bg-primary);
1478
+ border: 1px solid var(--border-subtle);
1479
+ border-radius: var(--radius-sm);
1480
+ padding: 8px 12px;
1481
+ color: var(--green);
1482
+ word-break: break-all;
1483
+ line-height: 1.5;
1484
+ }
1485
+ .btn-restore-cmd {
1486
+ flex-shrink: 0;
1487
+ white-space: nowrap;
1488
+ }
1489
+
1490
+ /* ── Utility ──────────────────────────────────────────────── */
1491
+
1492
+ .hidden { display: none !important; }
1493
+
1494
+ .text-muted { color: var(--text-secondary); }
1495
+ .text-sm { font-size: 12px; }
1496
+ .text-mono { font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px; }
1497
+
1498
+ .flex-between { display: flex; align-items: center; justify-content: space-between; }
1499
+ .gap-4 { gap: 4px; }
1500
+ .mt-2 { margin-top: 8px; }
1501
+
1502
+ .copy-toast {
1503
+ position: fixed;
1504
+ bottom: 28px;
1505
+ left: 50%;
1506
+ transform: translateX(-50%) translateY(20px);
1507
+ background: var(--green);
1508
+ color: var(--surface);
1509
+ padding: 8px 20px;
1510
+ border-radius: var(--radius);
1511
+ font-size: 12px;
1512
+ font-weight: 700;
1513
+ opacity: 0;
1514
+ transition: opacity .25s, transform .25s;
1515
+ z-index: 200;
1516
+ pointer-events: none;
1517
+ box-shadow: var(--shadow-soft), 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent);
1518
+ }
1519
+ .copy-toast.show {
1520
+ opacity: 1;
1521
+ transform: translateX(-50%) translateY(0);
1522
+ }
1523
+
1524
+ /* ── Scrollbar ────────────────────────────────────────────── */
1525
+
1526
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
1527
+ ::-webkit-scrollbar-track { background: transparent; }
1528
+ ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
1529
+ ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
1530
+
1531
+ /* ── Selection ───────────────────────────────────────────── */
1532
+
1533
+ ::selection {
1534
+ background: color-mix(in srgb, var(--blue) 32%, transparent);
1535
+ color: var(--text-heading);
1536
+ }
1537
+
1538
+ /* ── File Detail Modal ────────────────────────────────────── */
1539
+
1540
+ .modal-overlay {
1541
+ position: fixed;
1542
+ inset: 0;
1543
+ background: rgba(0, 0, 0, 0.55);
1544
+ z-index: 2000;
1545
+ display: none;
1546
+ align-items: center;
1547
+ justify-content: center;
1548
+ backdrop-filter: blur(2px);
1549
+ }
1550
+ .modal-overlay.active {
1551
+ display: flex;
1552
+ }
1553
+ .file-modal {
1554
+ background: linear-gradient(
1555
+ 165deg,
1556
+ color-mix(in srgb, var(--card-bg) 100%, var(--text-primary)) 0%,
1557
+ color-mix(in srgb, var(--card-bg) 96%, transparent) 100%
1558
+ );
1559
+ border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
1560
+ border-radius: var(--radius-lg);
1561
+ width: 90vw;
1562
+ max-width: 720px;
1563
+ max-height: 80vh;
1564
+ display: flex;
1565
+ flex-direction: column;
1566
+ box-shadow: var(--shadow-lg), var(--shadow-soft);
1567
+ }
1568
+ .file-modal-header {
1569
+ display: flex;
1570
+ justify-content: space-between;
1571
+ align-items: center;
1572
+ padding: 14px 20px;
1573
+ border-bottom: 1px solid var(--border);
1574
+ }
1575
+ .file-modal-header h3 {
1576
+ margin: 0;
1577
+ font-size: 15px;
1578
+ font-weight: 600;
1579
+ }
1580
+ .file-modal-body {
1581
+ padding: 16px 20px;
1582
+ overflow-y: auto;
1583
+ flex: 1;
1584
+ }
1585
+ .file-modal-body table {
1586
+ width: 100%;
1587
+ border-collapse: collapse;
1588
+ }
1589
+ .file-modal-body th,
1590
+ .file-modal-body td {
1591
+ padding: 6px 10px;
1592
+ text-align: left;
1593
+ border-bottom: 1px solid var(--border);
1594
+ font-size: 12px;
1595
+ }
1596
+ .file-modal-body th {
1597
+ font-weight: 600;
1598
+ font-size: 11px;
1599
+ text-transform: uppercase;
1600
+ letter-spacing: 0.3px;
1601
+ color: var(--text-secondary);
1602
+ cursor: pointer;
1603
+ user-select: none;
1604
+ }
1605
+ .file-modal-body th:hover {
1606
+ color: var(--accent);
1607
+ }
1608
+ .modal-file-path {
1609
+ max-width: 340px;
1610
+ overflow: hidden;
1611
+ text-overflow: ellipsis;
1612
+ white-space: nowrap;
1613
+ }
1614
+ .modal-file-changes {
1615
+ white-space: nowrap;
1616
+ }
1617
+ .modal-restore-btn {
1618
+ padding: 2px 8px;
1619
+ font-size: 10px;
1620
+ border: 1px solid var(--border);
1621
+ border-radius: var(--radius-sm);
1622
+ background: var(--bg);
1623
+ color: var(--text-secondary);
1624
+ cursor: pointer;
1625
+ white-space: nowrap;
1626
+ transition: all 0.15s;
1627
+ }
1628
+ .modal-restore-btn:hover {
1629
+ background: var(--accent);
1630
+ color: #fff;
1631
+ border-color: var(--accent);
1632
+ }
1633
+ .modal-restore-btn.copied {
1634
+ background: var(--green);
1635
+ color: #fff;
1636
+ border-color: var(--green);
1637
+ }
1638
+ .modal-restore-btn.btn-deleted {
1639
+ border-color: var(--orange, #f0ad4e);
1640
+ color: var(--orange, #f0ad4e);
1641
+ }
1642
+ .modal-restore-btn.btn-deleted:hover {
1643
+ background: var(--orange, #f0ad4e);
1644
+ color: #fff;
1645
+ border-color: var(--orange, #f0ad4e);
1646
+ }
1647
+
1648
+ /* ── Responsive ───────────────────────────────────────────── */
1649
+
1650
+ @media (max-width: 768px) {
1651
+ #topbar { padding: 0 14px; gap: 8px; }
1652
+ .logo-text { display: none; }
1653
+ main { padding: 18px 14px 40px; }
1654
+ .card-grid { grid-template-columns: 1fr; }
1655
+ .card-health { grid-column: auto; }
1656
+ .protection-grid { grid-template-columns: 1fr; }
1657
+ .stats-row { flex-direction: column; }
1658
+ .drawer { width: 100vw; max-width: 100vw; }
1659
+ .diag-summary { flex-direction: column; align-items: flex-start; }
1660
+ }