Redesign EXIF viewer and compact tools UI

EXIF Viewer:
- Card-based grid layout with categories (Camera, Image, Date/Time, Exposure, GPS, Other)
- Icons for each category
- Truncation for long values with full value on hover

Tools UI:
- Reduced padding from 1.25rem to 0.5rem on all tool panels
- Smaller fonts for labels (0.55rem) and values (0.7rem)
- Compact headers and action buttons
- Tighter grid gaps and card padding

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontends/web/static/style.css

@@ -2247,7 +2247,7 @@ footer {
     display: none;
     width: 100%;
     flex: 1;
-    padding: 1.25rem;
+    padding: 0.5rem;
 }
 
 .tool-section.active {
@@ -2255,33 +2255,92 @@ footer {
     flex-direction: column;
 }
 
-/* EXIF Table in Results */
-.tool-exif-table {
-    font-size: 0.8rem;
-    max-height: 250px;
+/* EXIF Grid Layout */
+.exif-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 0.3rem;
+    max-height: 280px;
     overflow-y: auto;
+    padding: 0.15rem;
 }
 
-.tool-exif-table table {
-    width: 100%;
+.exif-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 4px;
+    padding: 0.25rem 0.4rem;
 }
 
-.tool-exif-table th,
-.tool-exif-table td {
-    padding: 0.35rem 0.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+.exif-card:hover {
+    background: rgba(255, 255, 255, 0.06);
 }
 
-.tool-exif-table th {
+.exif-card-label {
+    font-size: 0.55rem;
     font-weight: 500;
-    color: rgba(255, 255, 255, 0.5);
-    text-align: left;
-    width: 40%;
+    color: rgba(255, 255, 255, 0.4);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    margin-bottom: 0.1rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.tool-exif-table td {
+.exif-card-value {
+    font-size: 0.7rem;
     font-family: 'SF Mono', 'Consolas', monospace;
-    word-break: break-all;
+    color: rgba(255, 255, 255, 0.85);
+    word-break: break-word;
+    line-height: 1.2;
+}
+
+.exif-card-value.truncated {
+    max-height: 2.4em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+/* Category headers */
+.exif-category {
+    grid-column: 1 / -1;
+    font-size: 0.6rem;
+    font-weight: 600;
+    color: var(--bs-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 0.35rem 0 0.15rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    margin-top: 0.15rem;
+}
+
+.exif-category:first-child {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+/* Compact tool headers and actions */
+.tool-results-header {
+    padding-bottom: 0.35rem;
+    margin-bottom: 0.35rem;
+}
+
+.tool-results-header h6 {
+    font-size: 0.8rem;
+    margin-bottom: 0;
+}
+
+.tool-results-header small {
+    font-size: 0.65rem;
+}
+
+.tool-results-actions {
+    padding-top: 0.35rem;
+    margin-top: 0.35rem;
 }
 
 /* Loading State */