cursor-guard 4.9.9 → 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 (35) hide show
  1. package/README.md +697 -697
  2. package/README.zh-CN.md +696 -696
  3. package/ROADMAP.md +1775 -1720
  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 +70 -69
  8. package/references/dashboard/public/app.js +2079 -1832
  9. package/references/dashboard/public/style.css +1660 -1573
  10. package/references/dashboard/server.js +197 -4
  11. package/references/lib/core/backups.js +509 -492
  12. package/references/lib/core/core.test.js +1761 -1616
  13. package/references/lib/core/snapshot.js +441 -369
  14. package/references/mcp/mcp.test.js +381 -362
  15. package/references/mcp/server.js +404 -347
  16. package/references/vscode-extension/dist/{cursor-guard-ide-4.9.9.vsix → cursor-guard-ide-4.9.15.vsix} +0 -0
  17. package/references/vscode-extension/dist/dashboard/public/app.js +2079 -1832
  18. package/references/vscode-extension/dist/dashboard/public/style.css +1660 -1573
  19. package/references/vscode-extension/dist/dashboard/server.js +197 -4
  20. package/references/vscode-extension/dist/extension.js +780 -704
  21. package/references/vscode-extension/dist/guard-version.json +1 -1
  22. package/references/vscode-extension/dist/lib/auto-setup.js +201 -192
  23. package/references/vscode-extension/dist/lib/core/backups.js +509 -492
  24. package/references/vscode-extension/dist/lib/core/snapshot.js +441 -369
  25. package/references/vscode-extension/dist/lib/poller.js +161 -21
  26. package/references/vscode-extension/dist/lib/sidebar-webview.js +22 -0
  27. package/references/vscode-extension/dist/mcp/server.js +152 -35
  28. package/references/vscode-extension/dist/package.json +7 -1
  29. package/references/vscode-extension/dist/skill/ROADMAP.md +1775 -1720
  30. package/references/vscode-extension/dist/skill/SKILL.md +631 -629
  31. package/references/vscode-extension/extension.js +780 -704
  32. package/references/vscode-extension/lib/auto-setup.js +201 -192
  33. package/references/vscode-extension/lib/poller.js +161 -21
  34. package/references/vscode-extension/lib/sidebar-webview.js +22 -0
  35. package/references/vscode-extension/package.json +146 -140
package/references/vscode-extension/dist/dashboard/public/style.css CHANGED
@@ -1,1573 +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
-
446
- .summary-stack { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
447
- .summary-meta { display: flex; align-items: center; gap: 8px; }
448
- .summary-files {
449
- font-size: 13px;
450
- font-weight: 700;
451
- color: var(--text-heading);
452
- font-variant-numeric: tabular-nums;
453
- }
454
- .summary-intent {
455
- font-size: 12px;
456
- color: var(--blue);
457
- background: var(--blue-bg);
458
- padding: 4px 10px;
459
- border-radius: 4px;
460
- border-left: 3px solid var(--blue);
461
- overflow: hidden;
462
- text-overflow: ellipsis;
463
- white-space: nowrap;
464
- max-width: 400px;
465
- line-height: 1.4;
466
- }
467
- .summary-intent-label {
468
- font-weight: 600;
469
- opacity: 0.7;
470
- }
471
- .summary-trigger {
472
- font-size: 11px;
473
- padding: 2px 0;
474
- }
475
- .summary-restore-ctx {
476
- font-size: 12px;
477
- color: var(--amber);
478
- background: var(--amber-bg);
479
- padding: 4px 10px;
480
- border-radius: 4px;
481
- border-left: 3px solid var(--amber);
482
- overflow: hidden;
483
- text-overflow: ellipsis;
484
- white-space: nowrap;
485
- max-width: 400px;
486
- line-height: 1.4;
487
- }
488
- .summary-message {
489
- font-size: 12px;
490
- color: var(--text-primary);
491
- background: var(--bg-tertiary);
492
- padding: 3px 8px;
493
- border-radius: 3px;
494
- border-left: 3px solid var(--text-tertiary);
495
- overflow: hidden;
496
- text-overflow: ellipsis;
497
- white-space: nowrap;
498
- max-width: 400px;
499
- line-height: 1.4;
500
- }
501
- .summary-detail-line {
502
- font-size: 12px;
503
- color: var(--text-secondary);
504
- font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
505
- line-height: 1.5;
506
- padding: 1px 0;
507
- overflow: hidden;
508
- text-overflow: ellipsis;
509
- white-space: nowrap;
510
- max-width: 400px;
511
- }
512
- .summary-detail-line:first-child { padding-top: 2px; }
513
-
514
- .summary-collapsed {
515
- display: none;
516
- }
517
- .summary-expanded .summary-collapsed {
518
- display: block;
519
- }
520
- .summary-toggle-btn {
521
- background: none;
522
- border: none;
523
- color: var(--blue);
524
- font-size: 11px;
525
- font-weight: 600;
526
- cursor: pointer;
527
- padding: 2px 0;
528
- transition: color var(--transition);
529
- }
530
- .summary-toggle-btn:hover { color: var(--text-heading); }
531
- .summary-expanded .summary-toggle-btn { display: none; }
532
-
533
- .summary-pre {
534
- font-size: 12px;
535
- line-height: 1.6;
536
- white-space: pre-wrap;
537
- margin: 0;
538
- padding: 8px 10px;
539
- background: var(--bg-tertiary);
540
- border-radius: 4px;
541
- border-left: 3px solid var(--blue);
542
- }
543
-
544
- /* ── Summary inline file rows ────────────────────────────── */
545
-
546
- .summary-file-row {
547
- display: flex;
548
- align-items: center;
549
- gap: 6px;
550
- padding: 1px 0;
551
- font-size: 11px;
552
- line-height: 1.4;
553
- }
554
- .summary-file-path {
555
- flex: 1;
556
- overflow: hidden;
557
- text-overflow: ellipsis;
558
- white-space: nowrap;
559
- max-width: 220px;
560
- font-size: 11px;
561
- color: var(--text-primary);
562
- }
563
- .summary-file-more {
564
- padding: 2px 0;
565
- font-style: italic;
566
- }
567
-
568
- /* ── Stats Row ────────────────────────────────────────────── */
569
-
570
- .stats-row {
571
- display: flex;
572
- flex-wrap: wrap;
573
- gap: 14px;
574
- margin-bottom: 18px;
575
- }
576
-
577
- .stat-card {
578
- background: linear-gradient(
579
- 165deg,
580
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
581
- color-mix(in srgb, var(--bg-secondary) 96%, transparent) 100%
582
- );
583
- border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
584
- border-radius: var(--radius-lg);
585
- padding: 12px 16px;
586
- min-width: 150px;
587
- flex: 1;
588
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
589
- box-shadow: var(--shadow);
590
- }
591
- .stat-card:hover {
592
- border-color: color-mix(in srgb, var(--border) 70%, var(--blue));
593
- box-shadow: var(--shadow-soft);
594
- }
595
- .stat-label {
596
- font-size: 10px;
597
- font-weight: 700;
598
- text-transform: uppercase;
599
- letter-spacing: .08em;
600
- color: var(--text-tertiary);
601
- margin-bottom: 6px;
602
- }
603
- .stat-value {
604
- font-size: 22px;
605
- font-weight: 800;
606
- letter-spacing: -.02em;
607
- color: var(--text-heading);
608
- }
609
-
610
- /* ── Filter Bar ───────────────────────────────────────────── */
611
-
612
- .filter-bar {
613
- display: flex;
614
- flex-wrap: wrap;
615
- gap: 8px;
616
- margin-bottom: 14px;
617
- }
618
-
619
- .filter-btn {
620
- padding: 5px 14px;
621
- border: 1px solid var(--border);
622
- border-radius: 16px;
623
- background: transparent;
624
- color: var(--text-secondary);
625
- font-size: 12px;
626
- font-weight: 500;
627
- cursor: pointer;
628
- transition: all var(--transition);
629
- }
630
- .filter-btn:hover {
631
- background: var(--bg-hover);
632
- color: var(--text-primary);
633
- border-color: rgba(100,116,139,.3);
634
- }
635
- .filter-btn.active {
636
- background: var(--blue-bg);
637
- color: var(--blue);
638
- border-color: color-mix(in srgb, var(--blue) 42%, var(--border));
639
- font-weight: 600;
640
- }
641
-
642
- /* ── Table ────────────────────────────────────────────────── */
643
-
644
- .table-wrap {
645
- background: linear-gradient(
646
- 165deg,
647
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
648
- color-mix(in srgb, var(--bg-secondary) 97%, transparent) 100%
649
- );
650
- border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
651
- border-radius: var(--radius-lg);
652
- overflow: auto;
653
- max-height: 440px;
654
- box-shadow: var(--shadow);
655
- }
656
-
657
- .data-table {
658
- width: 100%;
659
- border-collapse: collapse;
660
- font-size: 13px;
661
- }
662
- .data-table th {
663
- text-align: left;
664
- padding: 12px 16px;
665
- font-weight: 700;
666
- font-size: 10px;
667
- text-transform: uppercase;
668
- letter-spacing: .08em;
669
- color: var(--text-tertiary);
670
- border-bottom: 1px solid var(--border);
671
- position: sticky;
672
- top: 0;
673
- background: var(--bg-elevated);
674
- z-index: 2;
675
- }
676
- .data-table td {
677
- padding: 10px 16px;
678
- border-bottom: 1px solid var(--border-subtle);
679
- vertical-align: top;
680
- }
681
- .data-table tbody tr {
682
- cursor: pointer;
683
- transition: background var(--transition);
684
- }
685
- .data-table tbody tr:hover {
686
- background: color-mix(in srgb, var(--blue) 6%, transparent);
687
- }
688
- .data-table tbody tr:nth-child(even) {
689
- background: color-mix(in srgb, var(--text-primary) 2.5%, transparent);
690
- }
691
- .data-table tbody tr:nth-child(even):hover {
692
- background: color-mix(in srgb, var(--blue) 6%, transparent);
693
- }
694
-
695
- /* ── Protection ───────────────────────────────────────────── */
696
-
697
- .protection-grid {
698
- display: grid;
699
- grid-template-columns: 1fr 1fr;
700
- gap: 16px;
701
- }
702
-
703
- .pattern-card {
704
- background: linear-gradient(
705
- 165deg,
706
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
707
- color-mix(in srgb, var(--bg-secondary) 96%, transparent) 100%
708
- );
709
- border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
710
- border-radius: var(--radius-lg);
711
- padding: 16px;
712
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
713
- box-shadow: var(--shadow);
714
- }
715
- .pattern-card:hover {
716
- box-shadow: var(--shadow-soft);
717
- }
718
- .pattern-card--protect {
719
- border-color: color-mix(in srgb, var(--green) 34%, var(--border));
720
- background: linear-gradient(
721
- 165deg,
722
- color-mix(in srgb, var(--green) 9%, var(--bg-secondary)) 0%,
723
- color-mix(in srgb, var(--bg-secondary) 98%, var(--text-primary)) 100%
724
- );
725
- }
726
- .pattern-card--protect:hover {
727
- border-color: color-mix(in srgb, var(--green) 48%, var(--border));
728
- }
729
- .pattern-card--ignore {
730
- border-color: color-mix(in srgb, var(--muted) 26%, var(--border));
731
- background: linear-gradient(
732
- 165deg,
733
- color-mix(in srgb, var(--muted) 7%, var(--bg-secondary)) 0%,
734
- color-mix(in srgb, var(--bg-secondary) 98%, var(--text-primary)) 100%
735
- );
736
- }
737
- .pattern-card--ignore:hover {
738
- border-color: color-mix(in srgb, var(--muted) 38%, var(--border));
739
- }
740
- .pattern-card h4 {
741
- font-size: 10px;
742
- font-weight: 700;
743
- text-transform: uppercase;
744
- letter-spacing: .1em;
745
- margin-bottom: 12px;
746
- }
747
- .pattern-card--protect h4 { color: var(--green); }
748
- .pattern-card--ignore h4 { color: color-mix(in srgb, var(--muted) 88%, var(--text)); }
749
-
750
- .pattern-empty {
751
- margin: 0;
752
- line-height: 1.5;
753
- }
754
- .pattern-empty--protect { color: color-mix(in srgb, var(--green) 65%, var(--muted)); }
755
- .pattern-empty--ignore { color: color-mix(in srgb, var(--muted) 95%, var(--text)); }
756
-
757
- .pattern-list {
758
- list-style: none;
759
- display: flex;
760
- flex-wrap: wrap;
761
- gap: 8px;
762
- }
763
- .pattern-item {
764
- font-family: var(--font-mono);
765
- font-size: 11px;
766
- padding: 5px 10px;
767
- border-radius: 8px;
768
- transition: border-color 0.15s ease, box-shadow 0.15s ease;
769
- }
770
- .pattern-item--protect {
771
- color: color-mix(in srgb, var(--green) 90%, #fff);
772
- background: color-mix(in srgb, var(--green) 13%, var(--bg-tertiary));
773
- border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
774
- box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 8%, transparent);
775
- }
776
- .pattern-item--protect:hover {
777
- border-color: color-mix(in srgb, var(--green) 58%, transparent);
778
- box-shadow: var(--shadow-soft);
779
- }
780
- .pattern-item--ignore {
781
- color: color-mix(in srgb, var(--muted) 96%, var(--text));
782
- background: color-mix(in srgb, var(--muted) 11%, var(--bg-tertiary));
783
- border: 1px solid color-mix(in srgb, var(--muted) 32%, var(--border));
784
- }
785
- .pattern-item--ignore:hover {
786
- border-color: color-mix(in srgb, var(--muted) 50%, var(--border));
787
- }
788
-
789
- .protection-note {
790
- margin-top: 16px;
791
- font-size: 12px;
792
- color: var(--text-tertiary);
793
- font-style: italic;
794
- line-height: 1.5;
795
- }
796
-
797
- .protection-count {
798
- margin-top: 14px;
799
- font-size: 14px;
800
- font-weight: 700;
801
- color: var(--text-heading);
802
- }
803
-
804
- /* ── Diagnostics Summary ──────────────────────────────────── */
805
-
806
- .diag-summary {
807
- background: linear-gradient(
808
- 165deg,
809
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
810
- color-mix(in srgb, var(--bg-elevated) 94%, transparent) 100%
811
- );
812
- border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
813
- border-radius: var(--radius-lg);
814
- padding: 18px 22px;
815
- display: flex;
816
- align-items: center;
817
- gap: 24px;
818
- cursor: pointer;
819
- transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
820
- box-shadow: var(--shadow);
821
- }
822
- .diag-summary:hover {
823
- transform: translateY(-1px);
824
- box-shadow: var(--shadow-soft);
825
- border-color: color-mix(in srgb, var(--border) 70%, var(--blue));
826
- }
827
-
828
- .diag-counts {
829
- display: flex;
830
- gap: 16px;
831
- }
832
- .diag-count {
833
- text-align: center;
834
- min-width: 48px;
835
- }
836
- .diag-count .num {
837
- font-size: 26px;
838
- font-weight: 800;
839
- display: block;
840
- letter-spacing: -.02em;
841
- }
842
- .diag-count .label {
843
- font-size: 10px;
844
- font-weight: 600;
845
- text-transform: uppercase;
846
- letter-spacing: .06em;
847
- }
848
-
849
- .diag-hint {
850
- margin-left: auto;
851
- font-size: 12px;
852
- color: var(--text-tertiary);
853
- opacity: .7;
854
- }
855
-
856
- /* ── Drawer ───────────────────────────────────────────────── */
857
-
858
- .drawer-overlay {
859
- position: fixed;
860
- inset: 0;
861
- background: rgba(0,0,0,.6);
862
- backdrop-filter: blur(4px);
863
- z-index: 100;
864
- opacity: 0;
865
- visibility: hidden;
866
- transition: opacity .25s, visibility .25s;
867
- }
868
- .drawer-overlay.active {
869
- opacity: 1;
870
- visibility: visible;
871
- }
872
-
873
- .drawer {
874
- position: fixed;
875
- top: 0; right: 0; bottom: 0;
876
- width: var(--drawer-w);
877
- max-width: 92vw;
878
- background: linear-gradient(
879
- 180deg,
880
- color-mix(in srgb, var(--bg-secondary) 100%, var(--text-primary)) 0%,
881
- var(--bg-primary) 100%
882
- );
883
- border-left: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
884
- box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
885
- z-index: 101;
886
- display: flex;
887
- flex-direction: column;
888
- transform: translateX(100%);
889
- visibility: hidden;
890
- transition: transform .3s cubic-bezier(.32,.72,0,1), visibility .3s;
891
- }
892
- .drawer.active {
893
- transform: translateX(0);
894
- visibility: visible;
895
- }
896
-
897
- .drawer-header {
898
- display: flex;
899
- align-items: center;
900
- justify-content: space-between;
901
- padding: 18px 24px;
902
- border-bottom: 1px solid var(--border);
903
- }
904
- .drawer-header h3 {
905
- font-size: 15px;
906
- font-weight: 700;
907
- color: var(--text-heading);
908
- }
909
-
910
- .drawer-close {
911
- background: none;
912
- border: none;
913
- color: var(--text-tertiary);
914
- font-size: 24px;
915
- cursor: pointer;
916
- padding: 0 4px;
917
- line-height: 1;
918
- transition: color var(--transition);
919
- border-radius: 4px;
920
- }
921
- .drawer-close:hover { color: var(--text-primary); background: var(--bg-hover); }
922
-
923
- .drawer-body {
924
- flex: 1;
925
- overflow-y: auto;
926
- padding: 24px;
927
- }
928
-
929
- /* ── Drawer: Restore Point ────────────────────────────────── */
930
-
931
- .restore-field {
932
- margin-bottom: 16px;
933
- }
934
- .restore-field-label {
935
- font-size: 10px;
936
- font-weight: 700;
937
- text-transform: uppercase;
938
- letter-spacing: .08em;
939
- color: var(--text-tertiary);
940
- margin-bottom: 4px;
941
- }
942
- .restore-field-value {
943
- font-size: 14px;
944
- word-break: break-all;
945
- line-height: 1.5;
946
- }
947
-
948
- .restore-actions {
949
- display: flex;
950
- gap: 8px;
951
- margin-top: 24px;
952
- padding-top: 18px;
953
- border-top: 1px solid var(--border);
954
- }
955
-
956
- .json-preview {
957
- margin-top: 16px;
958
- padding: 14px;
959
- background: var(--bg-primary);
960
- border: 1px solid var(--border-subtle);
961
- border-radius: var(--radius-sm);
962
- font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
963
- font-size: 12px;
964
- white-space: pre-wrap;
965
- word-break: break-all;
966
- max-height: 300px;
967
- overflow: auto;
968
- color: var(--text-secondary);
969
- line-height: 1.6;
970
- }
971
-
972
- /* ── Drawer: Files Table ──────────────────────────────────── */
973
-
974
- .drawer-files-container {
975
- margin-top: 6px;
976
- max-height: 340px;
977
- overflow: auto;
978
- border: 1px solid var(--border-subtle);
979
- border-radius: var(--radius-sm);
980
- }
981
- .drawer-files-loading {
982
- padding: 16px;
983
- text-align: center;
984
- }
985
- .drawer-files-table {
986
- width: 100%;
987
- border-collapse: collapse;
988
- font-size: 12px;
989
- }
990
- .drawer-files-table th {
991
- text-align: left;
992
- padding: 8px 12px;
993
- font-size: 10px;
994
- font-weight: 700;
995
- text-transform: uppercase;
996
- letter-spacing: .06em;
997
- color: var(--text-tertiary);
998
- border-bottom: 1px solid var(--border-subtle);
999
- background: var(--bg-elevated);
1000
- position: sticky;
1001
- top: 0;
1002
- z-index: 1;
1003
- }
1004
- .drawer-sort-header { cursor: pointer; transition: color var(--transition); }
1005
- .drawer-sort-header:hover { color: var(--blue); }
1006
- .drawer-files-table td {
1007
- padding: 5px 12px;
1008
- border-bottom: 1px solid rgba(71,85,105,.15);
1009
- vertical-align: middle;
1010
- }
1011
- .drawer-file-path {
1012
- max-width: 280px;
1013
- overflow: hidden;
1014
- text-overflow: ellipsis;
1015
- white-space: nowrap;
1016
- color: var(--text-primary);
1017
- }
1018
- .drawer-file-changes {
1019
- white-space: nowrap;
1020
- font-variant-numeric: tabular-nums;
1021
- color: var(--text-secondary);
1022
- }
1023
-
1024
- /* ── Drawer: Doctor Checks ────────────────────────────────── */
1025
-
1026
- .check-item {
1027
- border-bottom: 1px solid var(--border-subtle);
1028
- }
1029
- .check-item:last-child { border-bottom: none; }
1030
-
1031
- .check-item summary {
1032
- display: flex;
1033
- align-items: center;
1034
- gap: 10px;
1035
- padding: 12px 0;
1036
- cursor: pointer;
1037
- list-style: none;
1038
- font-size: 13px;
1039
- transition: color var(--transition);
1040
- }
1041
- .check-item summary:hover { color: var(--text-heading); }
1042
- .check-item summary::-webkit-details-marker { display: none; }
1043
- .check-item summary::before {
1044
- content: '▸';
1045
- font-size: 10px;
1046
- color: var(--text-tertiary);
1047
- transition: transform .2s ease;
1048
- width: 14px;
1049
- text-align: center;
1050
- flex-shrink: 0;
1051
- }
1052
- .check-item[open] summary::before { transform: rotate(90deg); }
1053
-
1054
- .check-name { flex: 1; font-weight: 500; }
1055
- .check-detail {
1056
- padding: 0 0 12px 24px;
1057
- font-size: 12px;
1058
- color: var(--text-secondary);
1059
- line-height: 1.6;
1060
- }
1061
-
1062
- /* ── State panels ─────────────────────────────────────────── */
1063
-
1064
- .state-panel {
1065
- display: flex;
1066
- flex-direction: column;
1067
- align-items: center;
1068
- justify-content: center;
1069
- min-height: 320px;
1070
- text-align: center;
1071
- color: var(--text-secondary);
1072
- }
1073
-
1074
- .error-icon {
1075
- font-size: 40px;
1076
- margin-bottom: 14px;
1077
- color: var(--yellow);
1078
- filter: drop-shadow(0 0 8px var(--yellow-glow));
1079
- }
1080
-
1081
- .error-panel {
1082
- text-align: center;
1083
- padding: 48px 24px;
1084
- color: var(--text-tertiary);
1085
- }
1086
- .error-panel .error-icon { font-size: 32px; margin-bottom: 10px; }
1087
-
1088
- .empty-state {
1089
- text-align: center;
1090
- padding: 36px 20px;
1091
- color: var(--text-tertiary);
1092
- font-style: italic;
1093
- }
1094
-
1095
- /* ── Spinner ──────────────────────────────────────────────── */
1096
-
1097
- .spinner {
1098
- width: 36px; height: 36px;
1099
- border: 3px solid var(--border);
1100
- border-top-color: var(--blue);
1101
- border-radius: 50%;
1102
- animation: spin .7s linear infinite;
1103
- margin-bottom: 14px;
1104
- }
1105
- @keyframes spin { to { transform: rotate(360deg); } }
1106
-
1107
- .icon-spin-active { animation: spin .6s linear infinite; }
1108
-
1109
- /* ── Skeleton loading ────────────────────────────────────── */
1110
-
1111
- @keyframes shimmer {
1112
- 0% { background-position: -200% 0; }
1113
- 100% { background-position: 200% 0; }
1114
- }
1115
-
1116
- .skeleton-block {
1117
- height: 48px;
1118
- border-radius: var(--radius-sm);
1119
- background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
1120
- background-size: 200% 100%;
1121
- animation: shimmer 1.5s ease-in-out infinite;
1122
- }
1123
-
1124
- .skeleton-row {
1125
- display: flex;
1126
- gap: 12px;
1127
- }
1128
- .skeleton-row::before,
1129
- .skeleton-row::after {
1130
- content: '';
1131
- flex: 1;
1132
- height: 64px;
1133
- border-radius: var(--radius-sm);
1134
- background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
1135
- background-size: 200% 100%;
1136
- animation: shimmer 1.5s ease-in-out infinite;
1137
- }
1138
-
1139
- .skeleton-table {
1140
- display: flex;
1141
- flex-direction: column;
1142
- gap: 8px;
1143
- padding: 12px 0;
1144
- }
1145
- .skeleton-table::before,
1146
- .skeleton-table::after {
1147
- content: '';
1148
- display: block;
1149
- height: 36px;
1150
- border-radius: var(--radius-sm);
1151
- background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
1152
- background-size: 200% 100%;
1153
- animation: shimmer 1.5s ease-in-out infinite;
1154
- }
1155
- .skeleton-table::after { width: 75%; opacity: .6; }
1156
-
1157
- /* ── Alert Card Details ───────────────────────────────────── */
1158
-
1159
- .alert-details {
1160
- margin-top: 10px;
1161
- display: flex;
1162
- flex-direction: column;
1163
- gap: 6px;
1164
- }
1165
- .alert-detail-row {
1166
- display: flex;
1167
- align-items: center;
1168
- gap: 8px;
1169
- font-size: 12px;
1170
- color: var(--text-secondary);
1171
- }
1172
- .alert-detail-label {
1173
- font-weight: 600;
1174
- color: var(--text-tertiary);
1175
- min-width: 72px;
1176
- font-size: 10px;
1177
- text-transform: uppercase;
1178
- letter-spacing: .06em;
1179
- }
1180
- .alert-countdown {
1181
- color: var(--yellow);
1182
- font-weight: 700;
1183
- font-variant-numeric: tabular-nums;
1184
- }
1185
- .alert-numbers {
1186
- margin-top: 4px;
1187
- font-size: 13px;
1188
- font-weight: 600;
1189
- color: var(--yellow);
1190
- background: var(--yellow-bg);
1191
- padding: 6px 12px;
1192
- border-radius: var(--radius-sm);
1193
- border-left: 3px solid var(--yellow);
1194
- }
1195
-
1196
- .alert-breakdown {
1197
- color: var(--text-secondary);
1198
- font-weight: 500;
1199
- padding: 2px 12px;
1200
- }
1201
- .alert-suggestion {
1202
- padding: 4px 12px;
1203
- font-style: italic;
1204
- }
1205
- .alert-history-breakdown {
1206
- display: block;
1207
- font-size: 10px;
1208
- color: var(--text-tertiary);
1209
- margin-top: 1px;
1210
- }
1211
-
1212
- .alert-history-toggle-wrap {
1213
- margin-top: 8px;
1214
- }
1215
- .alert-history-toggle-btn {
1216
- background: none;
1217
- border: none;
1218
- color: var(--text-tertiary);
1219
- font-size: 11px;
1220
- cursor: pointer;
1221
- padding: 2px 0;
1222
- transition: color var(--transition);
1223
- }
1224
- .alert-history-toggle-btn:hover { color: var(--blue); }
1225
-
1226
- .alert-history {
1227
- margin-top: 8px;
1228
- border-top: 1px solid var(--border-subtle);
1229
- padding-top: 8px;
1230
- }
1231
- .alert-history.alert-history-collapsed { display: none; }
1232
- .alert-history-label {
1233
- font-size: 10px;
1234
- font-weight: 700;
1235
- text-transform: uppercase;
1236
- letter-spacing: .06em;
1237
- color: var(--text-tertiary);
1238
- margin-bottom: 6px;
1239
- }
1240
- .alert-history-row {
1241
- display: flex;
1242
- align-items: center;
1243
- gap: 8px;
1244
- padding: 3px 0;
1245
- font-size: 11px;
1246
- }
1247
- .badge-expired {
1248
- background: var(--gray-bg);
1249
- color: var(--gray);
1250
- border-color: rgba(100,116,139,.18);
1251
- font-size: 9px;
1252
- padding: 1px 6px;
1253
- }
1254
-
1255
- /* ── Alert Files Table ───────────────────────────────────── */
1256
-
1257
- .alert-files-section {
1258
- margin-top: 10px;
1259
- border-top: 1px solid var(--border-subtle);
1260
- padding-top: 8px;
1261
- }
1262
- .alert-files-toggle {
1263
- background: none;
1264
- border: none;
1265
- color: var(--blue);
1266
- font-size: 11px;
1267
- font-weight: 600;
1268
- cursor: pointer;
1269
- padding: 2px 0;
1270
- transition: color var(--transition);
1271
- }
1272
- .alert-files-toggle:hover { color: var(--text-heading); }
1273
-
1274
- .alert-files-table-wrap {
1275
- margin-top: 8px;
1276
- max-height: 220px;
1277
- overflow: auto;
1278
- border: 1px solid var(--border-subtle);
1279
- border-radius: var(--radius-sm);
1280
- }
1281
- .alert-files-hidden { display: none; }
1282
-
1283
- .alert-files-table {
1284
- width: 100%;
1285
- border-collapse: collapse;
1286
- font-size: 11px;
1287
- }
1288
- .alert-files-table th {
1289
- text-align: left;
1290
- padding: 6px 10px;
1291
- font-size: 9px;
1292
- font-weight: 700;
1293
- text-transform: uppercase;
1294
- letter-spacing: .06em;
1295
- color: var(--text-tertiary);
1296
- border-bottom: 1px solid var(--border-subtle);
1297
- background: var(--bg-elevated);
1298
- position: sticky;
1299
- top: 0;
1300
- z-index: 1;
1301
- }
1302
- .alert-files-table td {
1303
- padding: 4px 10px;
1304
- border-bottom: 1px solid rgba(71,85,105,.15);
1305
- vertical-align: middle;
1306
- }
1307
- .alert-file-path {
1308
- max-width: 240px;
1309
- overflow: hidden;
1310
- text-overflow: ellipsis;
1311
- white-space: nowrap;
1312
- color: var(--text-primary);
1313
- }
1314
- .alert-file-changes {
1315
- white-space: nowrap;
1316
- font-variant-numeric: tabular-nums;
1317
- color: var(--text-secondary);
1318
- }
1319
-
1320
- .alert-action-badge {
1321
- display: inline-block;
1322
- padding: 1px 6px;
1323
- border-radius: 8px;
1324
- font-size: 9px;
1325
- font-weight: 600;
1326
- letter-spacing: .02em;
1327
- }
1328
- .alert-action-modified { background: var(--blue-bg); color: var(--blue); }
1329
- .alert-action-added { background: var(--green-bg); color: var(--green); }
1330
- .alert-action-deleted { background: var(--red-bg); color: var(--red); }
1331
- .alert-action-renamed { background: var(--purple-bg); color: var(--purple); }
1332
-
1333
- /* ── File Search ─────────────────────────────────────────── */
1334
-
1335
- .file-search-wrap {
1336
- margin-bottom: 12px;
1337
- }
1338
- .file-search-input {
1339
- width: 100%;
1340
- max-width: 360px;
1341
- background: var(--bg-secondary);
1342
- color: var(--text-primary);
1343
- border: 1px solid var(--border);
1344
- border-radius: var(--radius-sm);
1345
- padding: 8px 14px;
1346
- font-size: 13px;
1347
- font-family: inherit;
1348
- transition: border-color var(--transition);
1349
- }
1350
- .file-search-input::placeholder { color: var(--text-tertiary); }
1351
- .file-search-input:focus {
1352
- outline: none;
1353
- border-color: var(--blue);
1354
- box-shadow: 0 0 0 3px var(--blue-bg);
1355
- }
1356
-
1357
- /* ── Filter Count ────────────────────────────────────────── */
1358
-
1359
- .filter-count {
1360
- font-size: 10px;
1361
- opacity: .65;
1362
- font-weight: 400;
1363
- }
1364
-
1365
- /* ── Restore Command Section ─────────────────────────────── */
1366
-
1367
- .restore-cmd-section {
1368
- margin-top: 18px;
1369
- padding-top: 16px;
1370
- border-top: 1px solid var(--border);
1371
- }
1372
- .restore-cmd-label {
1373
- font-size: 10px;
1374
- font-weight: 700;
1375
- text-transform: uppercase;
1376
- letter-spacing: .08em;
1377
- color: var(--text-tertiary);
1378
- margin-bottom: 10px;
1379
- }
1380
- .restore-cmd-row {
1381
- display: flex;
1382
- align-items: center;
1383
- gap: 8px;
1384
- margin-bottom: 8px;
1385
- }
1386
- .restore-cmd-code {
1387
- flex: 1;
1388
- font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
1389
- font-size: 11px;
1390
- background: var(--bg-primary);
1391
- border: 1px solid var(--border-subtle);
1392
- border-radius: var(--radius-sm);
1393
- padding: 8px 12px;
1394
- color: var(--green);
1395
- word-break: break-all;
1396
- line-height: 1.5;
1397
- }
1398
- .btn-restore-cmd {
1399
- flex-shrink: 0;
1400
- white-space: nowrap;
1401
- }
1402
-
1403
- /* ── Utility ──────────────────────────────────────────────── */
1404
-
1405
- .hidden { display: none !important; }
1406
-
1407
- .text-muted { color: var(--text-secondary); }
1408
- .text-sm { font-size: 12px; }
1409
- .text-mono { font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px; }
1410
-
1411
- .flex-between { display: flex; align-items: center; justify-content: space-between; }
1412
- .gap-4 { gap: 4px; }
1413
- .mt-2 { margin-top: 8px; }
1414
-
1415
- .copy-toast {
1416
- position: fixed;
1417
- bottom: 28px;
1418
- left: 50%;
1419
- transform: translateX(-50%) translateY(20px);
1420
- background: var(--green);
1421
- color: var(--surface);
1422
- padding: 8px 20px;
1423
- border-radius: var(--radius);
1424
- font-size: 12px;
1425
- font-weight: 700;
1426
- opacity: 0;
1427
- transition: opacity .25s, transform .25s;
1428
- z-index: 200;
1429
- pointer-events: none;
1430
- box-shadow: var(--shadow-soft), 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent);
1431
- }
1432
- .copy-toast.show {
1433
- opacity: 1;
1434
- transform: translateX(-50%) translateY(0);
1435
- }
1436
-
1437
- /* ── Scrollbar ────────────────────────────────────────────── */
1438
-
1439
- ::-webkit-scrollbar { width: 6px; height: 6px; }
1440
- ::-webkit-scrollbar-track { background: transparent; }
1441
- ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
1442
- ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
1443
-
1444
- /* ── Selection ───────────────────────────────────────────── */
1445
-
1446
- ::selection {
1447
- background: color-mix(in srgb, var(--blue) 32%, transparent);
1448
- color: var(--text-heading);
1449
- }
1450
-
1451
- /* ── File Detail Modal ────────────────────────────────────── */
1452
-
1453
- .modal-overlay {
1454
- position: fixed;
1455
- inset: 0;
1456
- background: rgba(0, 0, 0, 0.55);
1457
- z-index: 2000;
1458
- display: none;
1459
- align-items: center;
1460
- justify-content: center;
1461
- backdrop-filter: blur(2px);
1462
- }
1463
- .modal-overlay.active {
1464
- display: flex;
1465
- }
1466
- .file-modal {
1467
- background: linear-gradient(
1468
- 165deg,
1469
- color-mix(in srgb, var(--card-bg) 100%, var(--text-primary)) 0%,
1470
- color-mix(in srgb, var(--card-bg) 96%, transparent) 100%
1471
- );
1472
- border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
1473
- border-radius: var(--radius-lg);
1474
- width: 90vw;
1475
- max-width: 720px;
1476
- max-height: 80vh;
1477
- display: flex;
1478
- flex-direction: column;
1479
- box-shadow: var(--shadow-lg), var(--shadow-soft);
1480
- }
1481
- .file-modal-header {
1482
- display: flex;
1483
- justify-content: space-between;
1484
- align-items: center;
1485
- padding: 14px 20px;
1486
- border-bottom: 1px solid var(--border);
1487
- }
1488
- .file-modal-header h3 {
1489
- margin: 0;
1490
- font-size: 15px;
1491
- font-weight: 600;
1492
- }
1493
- .file-modal-body {
1494
- padding: 16px 20px;
1495
- overflow-y: auto;
1496
- flex: 1;
1497
- }
1498
- .file-modal-body table {
1499
- width: 100%;
1500
- border-collapse: collapse;
1501
- }
1502
- .file-modal-body th,
1503
- .file-modal-body td {
1504
- padding: 6px 10px;
1505
- text-align: left;
1506
- border-bottom: 1px solid var(--border);
1507
- font-size: 12px;
1508
- }
1509
- .file-modal-body th {
1510
- font-weight: 600;
1511
- font-size: 11px;
1512
- text-transform: uppercase;
1513
- letter-spacing: 0.3px;
1514
- color: var(--text-secondary);
1515
- cursor: pointer;
1516
- user-select: none;
1517
- }
1518
- .file-modal-body th:hover {
1519
- color: var(--accent);
1520
- }
1521
- .modal-file-path {
1522
- max-width: 340px;
1523
- overflow: hidden;
1524
- text-overflow: ellipsis;
1525
- white-space: nowrap;
1526
- }
1527
- .modal-file-changes {
1528
- white-space: nowrap;
1529
- }
1530
- .modal-restore-btn {
1531
- padding: 2px 8px;
1532
- font-size: 10px;
1533
- border: 1px solid var(--border);
1534
- border-radius: var(--radius-sm);
1535
- background: var(--bg);
1536
- color: var(--text-secondary);
1537
- cursor: pointer;
1538
- white-space: nowrap;
1539
- transition: all 0.15s;
1540
- }
1541
- .modal-restore-btn:hover {
1542
- background: var(--accent);
1543
- color: #fff;
1544
- border-color: var(--accent);
1545
- }
1546
- .modal-restore-btn.copied {
1547
- background: var(--green);
1548
- color: #fff;
1549
- border-color: var(--green);
1550
- }
1551
- .modal-restore-btn.btn-deleted {
1552
- border-color: var(--orange, #f0ad4e);
1553
- color: var(--orange, #f0ad4e);
1554
- }
1555
- .modal-restore-btn.btn-deleted:hover {
1556
- background: var(--orange, #f0ad4e);
1557
- color: #fff;
1558
- border-color: var(--orange, #f0ad4e);
1559
- }
1560
-
1561
- /* ── Responsive ───────────────────────────────────────────── */
1562
-
1563
- @media (max-width: 768px) {
1564
- #topbar { padding: 0 14px; gap: 8px; }
1565
- .logo-text { display: none; }
1566
- main { padding: 18px 14px 40px; }
1567
- .card-grid { grid-template-columns: 1fr; }
1568
- .card-health { grid-column: auto; }
1569
- .protection-grid { grid-template-columns: 1fr; }
1570
- .stats-row { flex-direction: column; }
1571
- .drawer { width: 100vw; max-width: 100vw; }
1572
- .diag-summary { flex-direction: column; align-items: flex-start; }
1573
- }
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
+ }