release: publish Twitch VOD Manager 1.0.3

Polish navigation, settings, streamer and queue workflows; add safe pause and partial-file lifecycle handling; apply the product identity across Windows surfaces; and replace the public README with a complete English product guide and isolated screenshot.

src/styles.css

@@ -973,6 +973,7 @@ select option {
 }
 
 .queue-item {
+    position: relative;
     display: flex;
     align-items: flex-start;
     gap: 10px;
@@ -1070,12 +1071,14 @@ select option {
     display: flex;
     align-items: center;
     gap: 8px;
+    min-height: 16px;
 }
 
 .queue-status-label {
     flex-shrink: 0;
     font-size: 10px;
     color: var(--text-secondary);
+    line-height: 16px;
 }
 
 .queue-meta {
@@ -1099,14 +1102,12 @@ select option {
 .queue-progress-bar {
     height: 100%;
     width: 0;
-    background: linear-gradient(90deg, var(--accent) 0%, #b97aff 100%);
+    background: linear-gradient(90deg, #168f4a 0%, var(--success) 100%);
     transition: width 0.3s ease;
     position: relative;
     overflow: hidden;
 }
 
-/* Moving shimmer overlay — implies "active" without needing a different
-   border or pulse rule. Only visible because the bar is purple. */
 .queue-progress-bar::after {
     content: '';
     position: absolute;
@@ -1121,26 +1122,52 @@ select option {
     100% { transform: translateX(100%); }
 }
 
-.queue-progress-bar.indeterminate {
-    width: 35% !important;
-    animation: queue-indeterminate 1.3s ease-in-out infinite;
-}
-
-.queue-progress-text {
+.queue-progress-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
     margin-top: 3px;
     font-size: 10px;
     color: var(--text-secondary);
+    line-height: 14px;
 }
 
-@keyframes queue-indeterminate {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(280%); }
+.queue-progress-status,
+.queue-progress-metrics {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.queue-progress-status.is-starting {
+    animation: queue-starting-pulse 1.1s ease-in-out infinite;
+}
+
+@keyframes queue-starting-pulse {
+    0%, 100% { opacity: 0.62; }
+    50% { opacity: 1; }
+}
+
+.queue-progress-metrics {
+    margin-left: auto;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
 }
 
 .queue-item .remove {
+    display: inline-flex;
+    width: 16px;
+    height: 16px;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 16px;
     cursor: pointer;
     color: var(--error);
     opacity: 0.7;
+    font-size: 11px;
+    line-height: 16px;
 }
 
 .queue-item .remove:hover {
@@ -1175,27 +1202,29 @@ select option {
     margin-bottom: 2px;
 }
 
-.queue-selector {
-    min-width: 22px;
-    height: 22px;
-    padding: 0 3px;
-    border: 2px solid var(--text-secondary);
-    border-radius: 4px;
-    cursor: pointer;
-    flex-shrink: 0;
-    display: flex;
+.queue-selection-order {
+    position: absolute;
+    z-index: 2;
+    top: -5px;
+    left: -5px;
+    display: inline-flex;
+    width: 18px;
+    height: 18px;
     align-items: center;
     justify-content: center;
-    font-size: 11px;
+    border: 2px solid var(--bg-panel);
+    border-radius: 50%;
+    background: var(--success);
+    color: #fff;
+    font-size: 10px;
     font-weight: 700;
-    color: var(--bg-primary);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
     user-select: none;
-    transition: all 0.15s;
 }
 
-.queue-selector:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.55);
+.queue-item.merge-selected {
+    box-shadow: inset 0 0 0 1px rgba(0, 200, 83, 0.45);
 }
 
 .queue-item .title:focus-visible {
@@ -1204,15 +1233,6 @@ select option {
     box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.45);
 }
 
-.queue-selector.selected {
-    background: var(--accent);
-    border-color: var(--accent);
-}
-
-.queue-selector:hover {
-    border-color: var(--accent);
-}
-
 .queue-item.merge-group {
     border-left: 3px solid var(--accent);
 }
@@ -1721,12 +1741,12 @@ input[type="checkbox"].vod-select-checkbox {
 }
 
 .vod-btn.primary {
-    background: var(--accent);
+    background: #1f7a43;
     color: white;
 }
 
 .vod-btn.primary:hover {
-    background: var(--accent-hover);
+    background: #186638;
 }
 
 .vod-btn.secondary {
@@ -1748,7 +1768,7 @@ input[type="checkbox"].vod-select-checkbox {
 }
 
 .vod-btn.primary:focus-visible {
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(31, 122, 67, 0.65);
 }
 
 /* Settings */
@@ -1905,17 +1925,9 @@ input[type="checkbox"].vod-select-checkbox {
 }
 
 .flag-en {
-    background: repeating-linear-gradient(to bottom, #b22234 0 7.7%, #ffffff 7.7% 15.4%);
-}
-
-.flag-en::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 45%;
-    height: 56%;
-    background: #3c3b6e;
+    width: 18px;
+    background: none;
+    opacity: 1;
 }
 
 .form-row {
@@ -3884,16 +3896,6 @@ input[type="number"]::-webkit-outer-spin-button {
     letter-spacing: 0.2px;
 }
 
-.streamer-section-counter-divider {
-    opacity: 0.5;
-    margin: 0 1px;
-}
-
-.streamer-section-counter-live {
-    color: #e91916;
-    font-weight: 600;
-}
-
 /* Empty-state hint inside the sidebar streamer list (no streamers
    added yet). Subtler than the full-page .empty-state — fits the
    narrow sidebar context. */
@@ -3945,8 +3947,6 @@ input[type="number"]::-webkit-outer-spin-button {
     background: rgba(0, 0, 0, 0.88);
 }
 
-.vod-card.preview-active .vod-duration-badge,
-.vod-card.preview-active .vod-select-checkbox,
 .vod-card.preview-active .vod-downloaded-badge {
     opacity: 0;
     transition: opacity 0.2s;