feat(ui): add clear queue flow and expose ISO expiry

- Add `formatBrowserTime()` and include ISO-8601 `expires_at` in box status JSON and `ExpiresAtISO` in the box view for browser-friendly rendering.
- Refresh UI styling (switch to MonoCraft/PixelOperatorMono, tweak base font size) and treat `aria-disabled="true"` like `disabled` for consistent button states.
- Introduce a clear-queue action with confirmation to reset upload state, unlock controls, and provide user feedback.feat(ui): add clear queue flow and expose ISO expiry

- Add `formatBrowserTime()` and include ISO-8601 `expires_at` in box status JSON and `ExpiresAtISO` in the box view for browser-friendly rendering.
- Refresh UI styling (switch to MonoCraft/PixelOperatorMono, tweak base font size) and treat `aria-disabled="true"` like `disabled` for consistent button states.
- Introduce a clear-queue action with confirmation to reset upload state, unlock controls, and provide user feedback.

static/css/upload.css

@@ -114,6 +114,22 @@ body.fit-window .desktop-wrap {
     text-align: left;
 }
 
+.menu-action[aria-disabled="true"] {
+    color: #808080;
+    text-shadow: 1px 1px 0 #ffffff;
+}
+
+.menu-action[aria-disabled="true"] img {
+    opacity: .55;
+    filter: grayscale(1);
+}
+
+.menu-action[aria-disabled="true"]:hover,
+.menu-action[aria-disabled="true"]:focus-visible {
+    color: #808080;
+    background: transparent;
+}
+
 .menu-action img {
     width: 16px;
     height: 16px;
@@ -672,15 +688,21 @@ body.fit-window .desktop-wrap {
 }
 
 .option-check input[type="checkbox"]:checked + span::after {
-    content: "✓";
+    content: "";
     position: absolute;
-    left: 2px;
-    top: -3px;
+    left: 4px;
+    top: 6px;
+    width: 2px;
+    height: 2px;
     color: #000000;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 18px;
-    line-height: 18px;
-    font-weight: bold;
+    background: #000000;
+    box-shadow:
+        2px 2px 0 #000000,
+        4px 4px 0 #000000,
+        6px 2px 0 #000000,
+        8px 0 0 #000000,
+        10px -2px 0 #000000;
+    image-rendering: pixelated;
 }
 
 .upload-select,
@@ -753,7 +775,7 @@ body.fit-window .desktop-wrap {
     font-family: 'MonoCraft', 'PixelOperatorMono', 'Courier New', monospace;
     font-size: 13px;
     line-height: 16px;
-    white-space: pre-wrap;
+    white-space: pre;
 }
 
 .terminal-box::after {
@@ -871,6 +893,8 @@ body.fit-window .desktop-wrap {
 }
 
 .popup-body {
+    flex: 1 1 auto;
+    min-height: 0;
     max-height: calc(100vh - 90px);
     padding: 12px;
     overflow: auto;
@@ -884,17 +908,40 @@ body.fit-window .desktop-wrap {
 .popup-body ul,
 .popup-body ol { margin: 0 0 8px 18px; padding: 0; }
 .popup-body li { margin: 0 0 4px; }
-.popup-body pre {
+.popup-body .code-block {
     margin: 6px 0 10px;
     padding: 8px;
+    width: 100%;
+    display: block;
     overflow: auto;
     color: #00ff66;
     background: #000000;
     border: 0;
-    font-family: 'PixelOperatorMono', 'Courier New', monospace;
+    font-family: 'MonoCraft', 'PixelOperatorMono', 'Courier New', monospace;
     font-size: 12px;
     line-height: 15px;
-    white-space: pre-wrap;
+    white-space: pre;
+    box-sizing: border-box;
+}
+
+.popup-window.is-about-popup .popup-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    overflow: hidden;
+}
+
+.about-popup-content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.about-popup-content p:last-child {
+    margin-top: auto;
+    margin-bottom: 0;
+    padding-top: 10px;
 }
 
 .popup-close {
@@ -1012,16 +1059,16 @@ body.fit-window .desktop-wrap {
 .copy-fallback-text {
     width: 100%;
     min-height: 58px;
-    font-family: 'PixelOperatorMono', monospace;
+    font-family: 'MonoCraft', 'PixelOperatorMono', monospace;
 }
 
-.popup-body pre {
+.popup-body .code-block {
     user-select: text;
     cursor: text;
     padding-bottom: 22px;
 }
 
-.popup-body pre::after {
+.popup-body .code-block::after {
     content: "\A";
     white-space: pre;
 }