refactor(code): Cleaned-up the code base

static/css/upload/responsive.css

@@ -0,0 +1,123 @@
+@keyframes upload-row-loading { 0% { background-color: #ffffff; } 100% { background-color: #e6e6e6; } }
+@keyframes quota-warning-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
+@keyframes row-warning-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
+@keyframes dropzone-attention { 0%, 100% { filter: brightness(1); transform: translateY(0); } 50% { filter: brightness(1.07); transform: translateY(-1px); } }
+@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; } }
+@keyframes toast-buzz { 0%, 100% { margin-right: 0; } 25% { margin-right: 2px; } 50% { margin-right: -2px; } }
+@keyframes api-key-scan { to { background-position: 32px 0; } }
+
+@media (max-width: 1320px) {
+    body { height: auto; min-height: 100vh; overflow-y: auto; }
+    .upload-main { height: auto; min-height: 100vh; place-items: start center; overflow: visible; }
+    .desktop-wrap {
+        --window-height: 680px;
+        grid-template-columns: minmax(0, 820px);
+        grid-template-rows: var(--window-height) auto;
+        width: min(820px, 100%);
+        max-width: 820px;
+        height: auto;
+        max-height: none;
+        overflow: visible;
+    }
+    .side-stack {
+        width: 100%;
+        min-width: 0;
+        max-width: none;
+        height: auto;
+        grid-template-columns: 1fr;
+        grid-template-rows: 350px 210px 132px;
+        overflow: visible;
+    }
+    .side-panel,
+    .helper-window {
+        width: 100%;
+        min-width: 0;
+        max-width: none;
+    }
+}
+
+@media (min-width: 1440px) {
+    .desktop-wrap { --window-height: 780px; }
+    .side-stack { grid-template-rows: 372px 230px 1fr; }
+}
+
+@media (max-width: 760px) {
+    .upload-main {
+        height: auto;
+        min-height: 100dvh;
+        place-items: stretch;
+        align-items: stretch;
+        padding: 0;
+        overflow: visible;
+    }
+    .desktop-wrap {
+        width: 100%;
+        max-width: none;
+        height: auto;
+        max-height: none;
+        min-height: 100dvh;
+        gap: 10px;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto;
+        overflow: visible;
+    }
+    .upload-window {
+        min-height: 100dvh;
+        height: auto;
+        width: 100vw;
+        border-left: 0;
+        border-right: 0;
+        box-shadow: none;
+    }
+    .side-stack {
+        grid-template-rows: auto auto auto;
+        padding: 0 6px 12px;
+    }
+    .side-panel:first-child { min-height: 360px; }
+    .side-panel:nth-child(2) { min-height: 210px; }
+    .helper-window { min-height: 128px; }
+    .upload-header { grid-template-columns: 1fr; }
+    .upload-panel { margin: 0 6px 8px; padding: 10px; }
+    .upload-dropzone { min-height: 118px; padding: 14px 10px; }
+    .upload-primary { font-size: 16px; }
+    .upload-details { flex-wrap: wrap; gap: 4px; }
+    .upload-file-count { margin-left: 0; width: 100%; }
+    .upload-file-row { grid-template-columns: 22px minmax(0, 1fr) 58px 28px; padding: 4px 5px; font-size: 12px; }
+    .upload-result { grid-template-columns: 1fr 72px; }
+    .upload-result-label { grid-column: 1 / 3; }
+    .upload-actions { justify-content: stretch; }
+    .upload-actions .win98-button { flex: 1; min-width: 0; }
+    .menu-bar { overflow-x: auto; }
+    .menu-popup { position: fixed; left: 6px; right: 6px; top: 50px; min-width: 0; }
+    .popup-window {
+        left: 0;
+        top: 0;
+        transform: none;
+        width: 100vw;
+        height: 100dvh;
+        max-height: none;
+        border: 0;
+        box-shadow: none;
+    }
+    .popup-window .win98-titlebar { height: 32px; }
+    .popup-close { width: 28px; height: 24px; font-size: 18px; font-weight: bold; }
+    .popup-body { max-height: calc(100dvh - 40px); }
+    .popup-window.is-visible { animation: popup-open-mobile-v10 160ms steps(5, end); }
+    @keyframes popup-open-mobile-v10 { from { transform: translateY(10px); opacity: .35; } to { transform: translateY(0); opacity: 1; } }
+}
+
+@media (max-width: 420px) {
+    :root { --base-font-size: 13px; }
+    .win98-titlebar h1 { font-size: 13px; }
+    .upload-file-size { display: none; }
+    .upload-file-row { grid-template-columns: 22px minmax(0, 1fr) 28px; }
+    .upload-file-remove { grid-column: 3; }
+    .upload-progress { grid-column: 2 / 3; }
+}