@primocaredentgroup/dental-digital-intake-ui 0.1.1

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.
@@ -0,0 +1,819 @@
1
+ .app-shell {
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem 1.5rem 4rem;
5
+ }
6
+
7
+ .app-header {
8
+ display: flex;
9
+ flex-wrap: wrap;
10
+ align-items: baseline;
11
+ justify-content: space-between;
12
+ gap: 1rem;
13
+ margin-bottom: 2rem;
14
+ }
15
+
16
+ .app-title {
17
+ margin: 0;
18
+ font-size: 1.75rem;
19
+ font-weight: 650;
20
+ letter-spacing: -0.03em;
21
+ }
22
+
23
+ .app-sub {
24
+ margin: 0.35rem 0 0;
25
+ color: #9fb0cb;
26
+ max-width: 52ch;
27
+ font-size: 0.95rem;
28
+ }
29
+
30
+ .panel {
31
+ background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
32
+ border: 1px solid rgba(255, 255, 255, 0.08);
33
+ border-radius: 16px;
34
+ padding: 1.25rem 1.35rem;
35
+ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
36
+ }
37
+
38
+ .btn-row {
39
+ display: flex;
40
+ flex-wrap: wrap;
41
+ gap: 0.6rem;
42
+ }
43
+
44
+ .btn {
45
+ border: none;
46
+ border-radius: 10px;
47
+ padding: 0.55rem 1rem;
48
+ font-weight: 600;
49
+ cursor: pointer;
50
+ transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
51
+ }
52
+
53
+ .warning-box {
54
+ margin-top: 0.75rem;
55
+ padding: 0.75rem 1rem;
56
+ border-radius: 12px;
57
+ background: rgba(251, 191, 36, 0.12);
58
+ border: 1px solid rgba(251, 191, 36, 0.35);
59
+ color: #fde68a;
60
+ font-size: 0.9rem;
61
+ }
62
+
63
+ .tool-grid {
64
+ display: flex;
65
+ flex-wrap: wrap;
66
+ gap: 0.5rem;
67
+ }
68
+
69
+ .btn:disabled {
70
+ opacity: 0.45;
71
+ cursor: not-allowed;
72
+ filter: grayscale(0.25);
73
+ }
74
+
75
+
76
+ .btn-primary {
77
+ background: linear-gradient(135deg, #3b82f6, #6366f1);
78
+ color: white;
79
+ box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
80
+ }
81
+ .btn-primary:hover:not(:disabled) {
82
+ transform: translateY(-1px);
83
+ }
84
+
85
+ .btn-ghost {
86
+ background: rgba(255, 255, 255, 0.06);
87
+ color: #e8edf7;
88
+ border: 1px solid rgba(255, 255, 255, 0.12);
89
+ }
90
+ .btn-ghost:hover:not(:disabled) {
91
+ background: rgba(255, 255, 255, 0.1);
92
+ }
93
+
94
+ .btn-danger {
95
+ background: rgba(239, 68, 68, 0.2);
96
+ color: #fecaca;
97
+ border: 1px solid rgba(239, 68, 68, 0.35);
98
+ }
99
+
100
+ .field-grid {
101
+ display: grid;
102
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
103
+ gap: 0.75rem 1rem;
104
+ }
105
+
106
+ .field label {
107
+ display: block;
108
+ font-size: 0.75rem;
109
+ text-transform: uppercase;
110
+ letter-spacing: 0.06em;
111
+ color: #8ea0bf;
112
+ margin-bottom: 0.25rem;
113
+ }
114
+
115
+ .field input,
116
+ .field select {
117
+ width: 100%;
118
+ border-radius: 10px;
119
+ border: 1px solid rgba(255, 255, 255, 0.12);
120
+ background: rgba(0, 0, 0, 0.35);
121
+ color: #f1f5ff;
122
+ padding: 0.5rem 0.65rem;
123
+ }
124
+
125
+ .kpi-grid {
126
+ display: grid;
127
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
128
+ gap: 0.75rem;
129
+ margin-bottom: 1.5rem;
130
+ }
131
+
132
+ .kpi {
133
+ padding: 1rem;
134
+ border-radius: 14px;
135
+ background: rgba(0, 0, 0, 0.35);
136
+ border: 1px solid rgba(255, 255, 255, 0.06);
137
+ }
138
+
139
+ .kpi-value {
140
+ font-size: 1.6rem;
141
+ font-weight: 700;
142
+ letter-spacing: -0.02em;
143
+ }
144
+
145
+ .kpi-label {
146
+ font-size: 0.8rem;
147
+ color: #9fb0cb;
148
+ margin-top: 0.2rem;
149
+ }
150
+
151
+ .acq-card {
152
+ text-align: left;
153
+ width: 100%;
154
+ border-radius: 14px;
155
+ padding: 1rem 1.1rem;
156
+ border: 1px solid rgba(255, 255, 255, 0.08);
157
+ background: rgba(0, 0, 0, 0.28);
158
+ cursor: pointer;
159
+ transition: border-color 0.15s ease, transform 0.12s ease;
160
+ color: inherit;
161
+ }
162
+
163
+ .acq-card:hover {
164
+ border-color: rgba(99, 102, 241, 0.45);
165
+ transform: translateY(-2px);
166
+ }
167
+
168
+ .acq-card-title {
169
+ font-weight: 600;
170
+ margin: 0 0 0.35rem;
171
+ }
172
+
173
+ .acq-card-sub {
174
+ margin: 0;
175
+ font-size: 0.85rem;
176
+ color: #9fb0cb;
177
+ }
178
+
179
+ .acq-grid {
180
+ display: grid;
181
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
182
+ gap: 0.85rem;
183
+ }
184
+
185
+ .detail-layout {
186
+ display: grid;
187
+ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
188
+ gap: 1.25rem;
189
+ align-items: start;
190
+ }
191
+
192
+ .detail-layout > div {
193
+ min-width: 0;
194
+ }
195
+
196
+ @media (max-width: 960px) {
197
+ .detail-layout {
198
+ grid-template-columns: 1fr;
199
+ }
200
+ }
201
+
202
+ .badge {
203
+ display: inline-flex;
204
+ align-items: center;
205
+ gap: 0.35rem;
206
+ border-radius: 999px;
207
+ padding: 0.2rem 0.65rem;
208
+ font-size: 0.72rem;
209
+ font-weight: 600;
210
+ letter-spacing: 0.02em;
211
+ text-transform: uppercase;
212
+ }
213
+
214
+ .badge-format {
215
+ background: rgba(14, 165, 233, 0.15);
216
+ color: #7dd3fc;
217
+ border: 1px solid rgba(14, 165, 233, 0.25);
218
+ }
219
+
220
+ .badge-role {
221
+ background: rgba(168, 85, 247, 0.15);
222
+ color: #e9d5ff;
223
+ border: 1px solid rgba(168, 85, 247, 0.25);
224
+ }
225
+
226
+ .file-row {
227
+ display: flex;
228
+ flex-wrap: wrap;
229
+ align-items: center;
230
+ gap: 0.5rem 0.75rem;
231
+ padding: 0.65rem 0;
232
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
233
+ min-width: 0;
234
+ }
235
+
236
+ .file-row:last-child {
237
+ border-bottom: none;
238
+ }
239
+
240
+ .file-row-main {
241
+ min-width: 0;
242
+ }
243
+
244
+ .file-row-path {
245
+ overflow-wrap: anywhere;
246
+ word-break: break-word;
247
+ }
248
+
249
+ .file-row-path code {
250
+ word-break: break-all;
251
+ }
252
+
253
+ .timeline {
254
+ position: relative;
255
+ padding-left: 1rem;
256
+ }
257
+
258
+ .timeline-item {
259
+ padding: 0.65rem 0 0.65rem 0.85rem;
260
+ border-left: 2px solid rgba(99, 102, 241, 0.35);
261
+ margin-left: 0.35rem;
262
+ }
263
+
264
+ .timeline-item:first-child {
265
+ padding-top: 0;
266
+ }
267
+
268
+ .manifest-pre {
269
+ margin: 0;
270
+ max-height: 360px;
271
+ overflow: auto;
272
+ padding: 1rem;
273
+ border-radius: 12px;
274
+ background: rgba(0, 0, 0, 0.45);
275
+ border: 1px solid rgba(255, 255, 255, 0.08);
276
+ color: #d6e2ff;
277
+ }
278
+
279
+ .preview-3d {
280
+ min-height: 220px;
281
+ border-radius: 16px;
282
+ border: 1px dashed rgba(99, 102, 241, 0.45);
283
+ background: repeating-linear-gradient(
284
+ 45deg,
285
+ rgba(99, 102, 241, 0.04),
286
+ rgba(99, 102, 241, 0.04) 12px,
287
+ rgba(0, 0, 0, 0.18) 12px,
288
+ rgba(0, 0, 0, 0.18) 24px
289
+ ),
290
+ radial-gradient(ellipse at center, rgba(59, 130, 246, 0.12), transparent);
291
+ display: flex;
292
+ flex-direction: column;
293
+ align-items: center;
294
+ justify-content: center;
295
+ gap: 0.5rem;
296
+ color: #b4c9ec;
297
+ text-align: center;
298
+ padding: 1.25rem;
299
+ }
300
+
301
+ .preview-3d strong {
302
+ color: #f1f5ff;
303
+ }
304
+
305
+ .preview-3d-empty {
306
+ min-height: 140px;
307
+ border-radius: 12px;
308
+ border: 1px solid rgba(148, 163, 184, 0.2);
309
+ background: rgba(15, 23, 42, 0.45);
310
+ }
311
+
312
+ .mesh-viewer-wrap {
313
+ margin-top: 0.25rem;
314
+ }
315
+
316
+ .mesh-viewer-toolbar {
317
+ display: flex;
318
+ flex-wrap: wrap;
319
+ align-items: center;
320
+ gap: 0.5rem 0.75rem;
321
+ margin-bottom: 0.65rem;
322
+ }
323
+
324
+ .mesh-viewer-canvas {
325
+ border-radius: 12px;
326
+ overflow: hidden;
327
+ border: 1px solid rgba(148, 163, 184, 0.18);
328
+ }
329
+
330
+ .mesh-viewer-canvas canvas {
331
+ display: block;
332
+ width: 100%;
333
+ }
334
+
335
+ label.toggle {
336
+ display: inline-flex;
337
+ align-items: center;
338
+ gap: 0.35rem;
339
+ font-size: 0.8rem;
340
+ color: #b4c9ec;
341
+ cursor: pointer;
342
+ user-select: none;
343
+ }
344
+
345
+ label.toggle input {
346
+ accent-color: #60a5fa;
347
+ }
348
+
349
+ .mesh-selector-list {
350
+ display: flex;
351
+ flex-direction: column;
352
+ gap: 0.5rem;
353
+ max-height: 220px;
354
+ overflow-y: auto;
355
+ padding-right: 0.25rem;
356
+ }
357
+
358
+ .mesh-selector-item {
359
+ text-align: left;
360
+ width: 100%;
361
+ border-radius: 10px;
362
+ padding: 0.55rem 0.65rem;
363
+ border: 1px solid rgba(148, 163, 184, 0.2);
364
+ background: rgba(15, 23, 42, 0.35);
365
+ color: #e2e8f0;
366
+ cursor: pointer;
367
+ transition: border-color 0.12s ease, background 0.12s ease;
368
+ }
369
+
370
+ .mesh-selector-item:hover {
371
+ border-color: rgba(96, 165, 250, 0.45);
372
+ background: rgba(30, 41, 59, 0.55);
373
+ }
374
+
375
+ .mesh-selector-item-active {
376
+ border-color: rgba(96, 165, 250, 0.85);
377
+ background: rgba(59, 130, 246, 0.12);
378
+ box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.25);
379
+ }
380
+
381
+ .modal-overlay {
382
+ position: fixed;
383
+ inset: 0;
384
+ background: rgba(0, 0, 0, 0.65);
385
+ display: grid;
386
+ place-items: center;
387
+ z-index: 50;
388
+ padding: 1rem;
389
+ }
390
+
391
+ .modal {
392
+ width: min(540px, 100%);
393
+ max-height: 90vh;
394
+ overflow: auto;
395
+ border-radius: 18px;
396
+ padding: 1.35rem 1.5rem;
397
+ background: #0d141f;
398
+ border: 1px solid rgba(255, 255, 255, 0.1);
399
+ box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65);
400
+ }
401
+
402
+ .muted {
403
+ color: #8ea0bf;
404
+ font-size: 0.9rem;
405
+ }
406
+
407
+ .err-banner {
408
+ background: rgba(239, 68, 68, 0.12);
409
+ border: 1px solid rgba(239, 68, 68, 0.35);
410
+ color: #fecaca;
411
+ padding: 0.65rem 0.85rem;
412
+ border-radius: 10px;
413
+ margin-bottom: 1rem;
414
+ font-size: 0.9rem;
415
+ }
416
+
417
+ .upload-dropzone {
418
+ border: 1px dashed rgba(148, 163, 184, 0.45);
419
+ border-radius: 14px;
420
+ padding: 1.25rem 1rem;
421
+ background: rgba(0, 0, 0, 0.2);
422
+ transition: border-color 0.15s ease, background 0.15s ease;
423
+ }
424
+
425
+ .upload-dropzone-active {
426
+ border-color: rgba(96, 165, 250, 0.8);
427
+ background: rgba(59, 130, 246, 0.08);
428
+ }
429
+
430
+ .cad-project-summary code {
431
+ color: #93c5fd;
432
+ word-break: break-all;
433
+ }
434
+
435
+ .cad-source-files-title {
436
+ display: block;
437
+ margin-top: 0.75rem;
438
+ margin-bottom: 0.35rem;
439
+ color: #f1f5ff;
440
+ font-size: 0.95rem;
441
+ }
442
+
443
+ .cad-source-file {
444
+ margin-top: 0.65rem;
445
+ padding: 0.85rem 1rem;
446
+ border: 1px solid rgba(255, 255, 255, 0.1);
447
+ border-radius: 12px;
448
+ background: rgba(0, 0, 0, 0.32);
449
+ color: #e8edf7;
450
+ }
451
+
452
+ .cad-source-file summary {
453
+ cursor: pointer;
454
+ font-weight: 600;
455
+ color: #f1f5ff;
456
+ list-style-position: outside;
457
+ }
458
+
459
+ .cad-source-file summary::-webkit-details-marker {
460
+ color: #9fb0cb;
461
+ }
462
+
463
+ .cad-source-file summary code {
464
+ color: #7dd3fc;
465
+ font-size: 0.88em;
466
+ word-break: break-all;
467
+ }
468
+
469
+ .cad-source-file-vendor {
470
+ font-weight: 400;
471
+ color: #9fb0cb;
472
+ }
473
+
474
+ .cad-source-file-body {
475
+ margin-top: 0.55rem;
476
+ font-size: 0.92rem;
477
+ line-height: 1.5;
478
+ }
479
+
480
+ .cad-source-file-body p {
481
+ margin: 0.3rem 0;
482
+ }
483
+
484
+ .cad-source-file-body strong {
485
+ color: #d6e2ff;
486
+ font-weight: 600;
487
+ }
488
+
489
+ .cad-source-file-path {
490
+ margin: 0.45rem 0 0;
491
+ font-size: 0.85rem;
492
+ color: #9fb0cb;
493
+ }
494
+
495
+ .cad-source-file-path code {
496
+ color: #b4c9ec;
497
+ word-break: break-all;
498
+ }
499
+
500
+ .cad-recon-label {
501
+ display: block;
502
+ margin-top: 0.4rem;
503
+ color: #9fb0cb;
504
+ font-size: 0.8rem;
505
+ text-transform: uppercase;
506
+ letter-spacing: 0.05em;
507
+ }
508
+
509
+ .cad-recon-list {
510
+ margin: 0.35rem 0 0;
511
+ padding-left: 1.15rem;
512
+ color: #c8d6f0;
513
+ }
514
+
515
+ .cad-recon-list li {
516
+ margin: 0.25rem 0;
517
+ }
518
+
519
+ .cad-recon-list li::marker {
520
+ color: #6366f1;
521
+ }
522
+
523
+ /* --- Sezione Exocad: componentistica implantare --- */
524
+ .exocad-section {
525
+ margin-top: 0.85rem;
526
+ }
527
+
528
+ .exocad-case {
529
+ display: flex;
530
+ flex-wrap: wrap;
531
+ gap: 0.4rem 1.1rem;
532
+ font-size: 0.9rem;
533
+ color: #d6e2ff;
534
+ margin-bottom: 0.7rem;
535
+ }
536
+
537
+ .exocad-case strong {
538
+ color: #f1f5ff;
539
+ }
540
+
541
+ .implant-box {
542
+ padding: 0.9rem 1rem;
543
+ border: 1px solid rgba(99, 102, 241, 0.35);
544
+ border-radius: 12px;
545
+ background: rgba(67, 56, 202, 0.12);
546
+ }
547
+
548
+ .implant-box-head {
549
+ display: flex;
550
+ align-items: center;
551
+ justify-content: space-between;
552
+ gap: 0.75rem;
553
+ margin-bottom: 0.6rem;
554
+ color: #f1f5ff;
555
+ }
556
+
557
+ .implant-flag {
558
+ font-size: 0.78rem;
559
+ padding: 0.15rem 0.55rem;
560
+ border-radius: 999px;
561
+ font-weight: 600;
562
+ }
563
+
564
+ .implant-flag.is-implant {
565
+ background: rgba(34, 197, 94, 0.18);
566
+ color: #86efac;
567
+ border: 1px solid rgba(34, 197, 94, 0.4);
568
+ }
569
+
570
+ .implant-flag.no-implant {
571
+ background: rgba(148, 163, 184, 0.15);
572
+ color: #cbd5e1;
573
+ border: 1px solid rgba(148, 163, 184, 0.3);
574
+ }
575
+
576
+ .implant-card-list {
577
+ display: grid;
578
+ gap: 0.7rem;
579
+ }
580
+
581
+ .implant-card {
582
+ padding: 0.75rem 0.85rem;
583
+ border: 1px solid rgba(255, 255, 255, 0.1);
584
+ border-radius: 10px;
585
+ background: rgba(0, 0, 0, 0.3);
586
+ color: #e8edf7;
587
+ }
588
+
589
+ .implant-card-head {
590
+ display: flex;
591
+ align-items: center;
592
+ justify-content: space-between;
593
+ gap: 0.6rem;
594
+ margin-bottom: 0.5rem;
595
+ }
596
+
597
+ .implant-card-head strong {
598
+ color: #f8fafc;
599
+ font-size: 1rem;
600
+ }
601
+
602
+ .implant-card-grid {
603
+ display: grid;
604
+ grid-template-columns: max-content 1fr;
605
+ gap: 0.25rem 0.85rem;
606
+ margin: 0;
607
+ font-size: 0.9rem;
608
+ }
609
+
610
+ .implant-card-grid dt {
611
+ color: #9fb0cb;
612
+ }
613
+
614
+ .implant-card-grid dd {
615
+ margin: 0;
616
+ color: #e8edf7;
617
+ }
618
+
619
+ .implant-card-grid code,
620
+ .implant-path {
621
+ color: #7dd3fc;
622
+ word-break: break-all;
623
+ font-size: 0.86em;
624
+ }
625
+
626
+ .implant-geom {
627
+ margin-top: 0.6rem;
628
+ padding-top: 0.5rem;
629
+ border-top: 1px dashed rgba(255, 255, 255, 0.12);
630
+ }
631
+
632
+ .implant-geom-title {
633
+ display: block;
634
+ font-size: 0.78rem;
635
+ text-transform: uppercase;
636
+ letter-spacing: 0.04em;
637
+ color: #fbbf24;
638
+ margin-bottom: 0.3rem;
639
+ }
640
+
641
+ .implant-geom-list {
642
+ margin: 0;
643
+ padding-left: 1.1rem;
644
+ font-size: 0.88rem;
645
+ color: #d6e2ff;
646
+ }
647
+
648
+ .implant-geom-list li {
649
+ margin: 0.2rem 0;
650
+ }
651
+
652
+ .implant-card-source {
653
+ margin: 0.55rem 0 0;
654
+ font-size: 0.8rem;
655
+ }
656
+
657
+ .implant-model {
658
+ margin: 0.65rem 0 0;
659
+ font-size: 0.86rem;
660
+ }
661
+
662
+ .implant-warnings {
663
+ margin: 0.65rem 0 0;
664
+ padding-left: 1.1rem;
665
+ font-size: 0.82rem;
666
+ color: #fcd9b6;
667
+ }
668
+
669
+ .implant-warnings li {
670
+ margin: 0.2rem 0;
671
+ }
672
+
673
+ .confidence-badge {
674
+ font-size: 0.72rem;
675
+ font-weight: 600;
676
+ padding: 0.08rem 0.45rem;
677
+ border-radius: 999px;
678
+ white-space: nowrap;
679
+ }
680
+
681
+ .confidence-high {
682
+ background: rgba(34, 197, 94, 0.18);
683
+ color: #86efac;
684
+ border: 1px solid rgba(34, 197, 94, 0.4);
685
+ }
686
+
687
+ .confidence-medium {
688
+ background: rgba(59, 130, 246, 0.18);
689
+ color: #93c5fd;
690
+ border: 1px solid rgba(59, 130, 246, 0.4);
691
+ }
692
+
693
+ .confidence-low {
694
+ background: rgba(148, 163, 184, 0.16);
695
+ color: #cbd5e1;
696
+ border: 1px solid rgba(148, 163, 184, 0.32);
697
+ }
698
+
699
+ .confidence-inferred {
700
+ background: rgba(251, 191, 36, 0.15);
701
+ color: #fcd34d;
702
+ border: 1px solid rgba(251, 191, 36, 0.38);
703
+ }
704
+
705
+ .ts-components {
706
+ margin-top: 0.4rem;
707
+ }
708
+
709
+ .ts-component-list {
710
+ list-style: none;
711
+ margin: 0.35rem 0 0;
712
+ padding: 0;
713
+ display: grid;
714
+ gap: 0.35rem;
715
+ }
716
+
717
+ .ts-component-list li {
718
+ display: flex;
719
+ align-items: center;
720
+ flex-wrap: wrap;
721
+ gap: 0.5rem;
722
+ font-size: 0.9rem;
723
+ color: #e8edf7;
724
+ }
725
+
726
+ .ts-component-list code {
727
+ color: #7dd3fc;
728
+ word-break: break-all;
729
+ }
730
+
731
+ .ts-component-type {
732
+ color: #c7d2fe;
733
+ font-size: 0.82rem;
734
+ background: rgba(99, 102, 241, 0.16);
735
+ border-radius: 999px;
736
+ padding: 0.08rem 0.5rem;
737
+ }
738
+
739
+ /* --- Card riepilogo caso (CaseSummaryCard) --- */
740
+ .summary-head {
741
+ display: flex;
742
+ align-items: center;
743
+ justify-content: space-between;
744
+ gap: 0.75rem;
745
+ margin-bottom: 0.85rem;
746
+ }
747
+
748
+ .summary-head h2,
749
+ .summary-head h3 {
750
+ color: #f1f5ff;
751
+ }
752
+
753
+ .vendor-pill {
754
+ display: inline-block;
755
+ padding: 0.1rem 0.6rem;
756
+ border-radius: 999px;
757
+ font-size: 0.85rem;
758
+ }
759
+
760
+ .vendor-detail {
761
+ background: rgba(99, 102, 241, 0.18);
762
+ color: #c7d2fe;
763
+ border: 1px solid rgba(99, 102, 241, 0.4);
764
+ }
765
+
766
+ .summary-list {
767
+ display: grid;
768
+ gap: 0.1rem;
769
+ }
770
+
771
+ .summary-row {
772
+ display: grid;
773
+ grid-template-columns: 180px 1fr;
774
+ gap: 0.75rem;
775
+ padding: 0.5rem 0;
776
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
777
+ }
778
+
779
+ .summary-label {
780
+ color: #9fb0cb;
781
+ font-size: 0.9rem;
782
+ }
783
+
784
+ .summary-value {
785
+ color: #f1f5ff;
786
+ font-weight: 500;
787
+ }
788
+
789
+ .summary-value code {
790
+ color: #7dd3fc;
791
+ word-break: break-all;
792
+ }
793
+
794
+ .case-flag {
795
+ display: inline-block;
796
+ padding: 0.1rem 0.55rem;
797
+ border-radius: 999px;
798
+ font-size: 0.85rem;
799
+ font-weight: 600;
800
+ }
801
+
802
+ .case-implant {
803
+ background: rgba(34, 197, 94, 0.18);
804
+ color: #86efac;
805
+ border: 1px solid rgba(34, 197, 94, 0.4);
806
+ }
807
+
808
+ .case-noimplant {
809
+ background: rgba(148, 163, 184, 0.16);
810
+ color: #cbd5e1;
811
+ border: 1px solid rgba(148, 163, 184, 0.32);
812
+ }
813
+
814
+ @media (max-width: 720px) {
815
+ .summary-row {
816
+ grid-template-columns: 1fr;
817
+ gap: 0.15rem;
818
+ }
819
+ }