Security Fixes

frontend/src/css/components.css

@@ -116,6 +116,19 @@
   border-color: #e53935;
 }
 
+/* Warning */
+.btn-warning {
+  background: var(--warning);
+  color: #1a1a1e;
+  border-color: var(--warning);
+}
+.btn-warning:hover {
+  filter: brightness(1.05);
+}
+.btn-warning:active {
+  filter: brightness(0.95);
+}
+
 /* Size variants */
 .btn-sm {
   height: 26px;

frontend/src/css/recordings.css

@@ -18,6 +18,34 @@
 }
 
 /* Recordings list in browser modal */
+.recording-storage {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0 0 12px;
+    margin-bottom: 12px;
+    border-bottom: 1px solid var(--border, #3f3f46);
+}
+
+.recording-storage-summary {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 12px;
+    color: var(--text-secondary, #a1a1aa);
+}
+
+.recording-cleanup-controls {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+    gap: 8px;
+    align-items: center;
+}
+
+.recording-cleanup-status {
+    min-height: 16px;
+}
+
 .recordings-list {
     display: flex;
     flex-direction: column;
@@ -66,6 +94,12 @@
     margin-left: 12px;
 }
 
+@media (max-width: 640px) {
+    .recording-cleanup-controls {
+        grid-template-columns: 1fr;
+    }
+}
+
 /* Playback modal — larger to fit a terminal */
 .modal-playback {
     width: 90vw;