feat(config): support *_MB env vars for upload size limits

- Add `applyMegabytesOrBytesEnv` to accept size settings in either bytes or MB
- Prefer `*_BYTES` when set, otherwise convert `*_MB` to bytes with overflow guard
- Add coverage for MB-based environment overrides
- Introduce `static/js/upload-popups.js` to lazy-load and cache popup templatesfeat(config): support *_MB env vars for upload size limits

- Add `applyMegabytesOrBytesEnv` to accept size settings in either bytes or MB
- Prefer `*_BYTES` when set, otherwise convert `*_MB` to bytes with overflow guard
- Add coverage for MB-based environment overrides
- Introduce `static/js/upload-popups.js` to lazy-load and cache popup templates

static/css/app.css

@@ -22,10 +22,13 @@
 :root {
     font-family: 'PixelOperator', 'MS Sans Serif', Arial, sans-serif;
     font-smooth: never;
+    -webkit-font-smoothing: none;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: geometricPrecision;
     image-rendering: pixelated;
-    cursor: url('/static/cursors/vaporwave-hotline-white-plus/Normal\ Select.cur'), auto;
 
     --base-font-size: 14px;
+    --ui-scale: 1;
     --w98-blue: #000078;
     --w98-blue-gradient: linear-gradient(90deg, #000078 0%, #000078 28%, #0f80cd 50%, #000078 72%, #000078 100%);
     --w98-gray: #c0c0c0;
@@ -38,6 +41,7 @@
     box-sizing: border-box;
     scrollbar-width: auto;
     scrollbar-color: #c0c0c0 #808080;
+    image-rendering: pixelated;
 }
 
 html {
@@ -75,7 +79,7 @@ label[for],
 .menu-button,
 .win98-button:not(:disabled),
 a {
-    cursor: url('/static/cursors/vaporwave-hotline-white-plus/Link\ Select.cur'), pointer;
+    cursor: pointer;
 }
 
 button,
@@ -90,7 +94,7 @@ input[type="password"],
 input[type="number"],
 input[type="file"],
 textarea {
-    cursor: url('/static/cursors/vaporwave-hotline-white-plus/Hotline\ Black\ Handwriting.cur'), text;
+    cursor: text;
 }
 
 :focus-visible {
@@ -172,18 +176,19 @@ textarea:disabled {
 }
 
 @media (min-width: 1800px) {
-    :root { --base-font-size: 15px; }
-    .desktop-wrap { zoom: 1.2; }
+    :root { --base-font-size: 15px; --ui-scale: 1.2; }
 }
 
 @media (min-width: 2048px) {
-    :root { --base-font-size: 16px; }
-    .desktop-wrap { zoom: 1.36; }
+    :root { --base-font-size: 16px; --ui-scale: 1.36; }
 }
 
 @media (min-width: 2560px) {
-    :root { --base-font-size: 18px; }
-    .desktop-wrap { zoom: 1.58; }
+    :root { --base-font-size: 18px; --ui-scale: 1.58; }
+}
+
+@media (min-width: 3200px) {
+    :root { --base-font-size: 20px; --ui-scale: 1.88; }
 }
 
 @media (prefers-reduced-motion: reduce) {

static/css/box.css

@@ -1,6 +1,7 @@
 .box-window {
     width: min(760px, calc(100vw - 36px));
     height: min(560px, calc(100vh - 36px));
+    zoom: var(--ui-scale);
 }
 
 .box-toolbar {
@@ -192,6 +193,7 @@
         height: 100dvh;
         border: 0;
         box-shadow: none;
+        zoom: 1;
     }
 
     .box-titlebar {

static/css/login.css

@@ -1,6 +1,7 @@
 .login-window {
     width: 420px;
     height: 248px;
+    zoom: var(--ui-scale);
 }
 
 .login-form {
@@ -109,6 +110,7 @@
         height: 100dvh;
         border: 0;
         box-shadow: none;
+        zoom: 1;
     }
 
     .login-titlebar {

static/css/upload.css

@@ -17,6 +17,14 @@
     justify-content: center;
     gap: 18px;
     overflow: hidden;
+    zoom: var(--ui-scale);
+}
+
+body.fit-window .desktop-wrap {
+    width: min(100%, calc(100vw / var(--ui-scale) - 20px));
+    height: min(calc(100vh / var(--ui-scale) - 20px), 900px);
+    max-height: none;
+    grid-template-columns: minmax(0, 1fr) var(--side-width);
 }
 
 .upload-window {
@@ -233,6 +241,7 @@
     background-color: #000078;
     background-image: repeating-linear-gradient(to right, rgba(255,255,255,.12) 0 1px, transparent 1px 18px);
     transform-origin: left center;
+    position: relative;
 }
 
 .upload-quota-bar.is-over-quota {
@@ -433,6 +442,26 @@
 .upload-file-row.is-uploaded .upload-progress-bar { background-color: #008000; }
 .upload-file-row.is-failed .upload-progress-bar { width: 100%; background-color: #800000; }
 
+.upload-progress-bar.just-completed,
+.upload-overall-bar.just-completed {
+    animation: progress-impact-bar 520ms steps(5, end) 1;
+}
+
+.upload-progress-bar.just-completed::after,
+.upload-overall-bar.just-completed::after {
+    content: "";
+    position: absolute;
+    right: -7px;
+    top: 50%;
+    width: 12px;
+    height: 22px;
+    transform: translateY(-50%);
+    background: repeating-linear-gradient(45deg, rgba(255,255,255,.95) 0 2px, rgba(0,255,102,.85) 2px 4px, transparent 4px 6px);
+    box-shadow: 0 0 0 1px #ffffff, 0 0 8px #00ff66;
+    pointer-events: none;
+    animation: progress-impact-spark 520ms steps(5, end) 1;
+}
+
 .upload-result {
     display: grid;
     grid-template-columns: 72px minmax(0, 1fr) 72px;
@@ -828,6 +857,7 @@
     max-height: min(760px, calc(100vh - 24px));
     display: none;
     z-index: 80;
+    zoom: var(--ui-scale);
 }
 
 .popup-window.is-visible {
@@ -888,6 +918,7 @@
     font-size: 12px;
     line-height: 14px;
     box-shadow: 4px 4px 0 rgba(0,0,0,.45);
+    zoom: var(--ui-scale);
 }
 
 .toast.is-visible {
@@ -984,6 +1015,17 @@
     font-family: 'PixelOperatorMono', monospace;
 }
 
+.popup-body pre {
+    user-select: text;
+    cursor: text;
+    padding-bottom: 22px;
+}
+
+.popup-body pre::after {
+    content: "\A";
+    white-space: pre;
+}
+
 .kbd {
     display: inline-block;
     min-width: 18px;
@@ -1002,6 +1044,8 @@
 @keyframes share-ready-pulse { 50% { filter: brightness(1.08); box-shadow: 0 0 0 2px #000078; } }
 @keyframes start-ready-rainbow-breathe { 0%, 100% { transform: rotate(-.35deg) scale(1); } 50% { transform: rotate(.35deg) scale(1.016); } }
 @keyframes start-border-rainbow-slide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
+@keyframes progress-impact-bar { 0% { filter: brightness(1); } 35% { filter: brightness(1.75); } 100% { filter: brightness(1); } }
+@keyframes progress-impact-spark { 0% { opacity: 0; transform: translateY(-50%) scale(.7); } 30% { opacity: 1; transform: translateY(-50%) scale(1.18); } 100% { opacity: 0; transform: translateY(-50%) scale(.7); } }
 @keyframes terminal-cursor { 50% { opacity: 0; } }
 @keyframes popup-open-v10 { from { transform: translate(-50%, -48%) scale(.97); opacity: .35; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
 @keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }