From b68a63ee48332614efcd8e2f0948f03bea2b50df Mon Sep 17 00:00:00 2001
From: m4xx1m <m4xx1m@users.noreply.them4x.net>
Date: Thu, 12 Nov 2026 20:45:52 +0300
Subject: [PATCH] style(ui): professional rectangular grayscale theme
 (Premiere/Resolve style without rounded corners)

---
 frontend/src/style.css | 526 +++++++++++++++++++++++------------------
 main.go                |  10 +-
 2 files changed, 302 insertions(+), 234 deletions(-)

diff --git a/frontend/src/style.css b/frontend/src/style.css
index 939098c..a29150c 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,18 +1,38 @@
 :root {
-  --bg: #0b0f17;
-  --panel: #111827;
-  --panel-2: #161f30;
-  --border: #243044;
-  --text: #f1f5f9;
-  --muted: #94a3b8;
-  --cyan: #06b6d4;
-  --cyan-glow: rgba(6, 182, 212, 0.25);
-  --violet: #8b5cf6;
-  --green: #10b981;
-  --red: #ef4444;
-  --amber: #f59e0b;
-  --radius: 10px;
-  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  /* Premiere / Pro-NLE Grayscale Palette */
+  --bg: #1c1c1c;
+  --panel: #252525;
+  --panel-2: #2b2b2b;
+  --panel-hover: #343434;
+  --panel-active: #3e3e3e;
+  --border: #383838;
+  --border-light: #484848;
+  --border-focus: #6e6e6e;
+
+  --text: #cccccc;
+  --text-bright: #f0f0f0;
+  --muted: #858585;
+  --dim: #5c5c5c;
+
+  /* Restrained Professional Accents */
+  --accent: #4a82c2;
+  --accent-hover: #5d93d4;
+  --accent-active: #3c6ea5;
+  --accent-glow: rgba(74, 130, 194, 0.22);
+
+  --trim-in: #4a82c2;
+  --trim-out: #8ba7c7;
+  --trim-band: rgba(74, 130, 194, 0.28);
+
+  --green: #4e8e5d;
+  --green-bg: rgba(78, 142, 93, 0.16);
+  --red: #a84646;
+  --red-bg: rgba(168, 70, 70, 0.16);
+  --amber: #a87d3e;
+  --amber-bg: rgba(168, 125, 62, 0.16);
+
+  --radius: 0px;
+  --mono: 'Cascadia Mono', 'Consolas', 'Segoe UI Mono', ui-monospace, Menlo, Monaco, monospace;
 }
 
 * {
@@ -26,33 +46,32 @@ body {
   height: 100%;
   background: var(--bg);
   color: var(--text);
-  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
-  font-size: 13px;
+  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 12px;
   user-select: none;
   overflow: hidden;
+  -webkit-font-smoothing: antialiased;
 }
 
-/* Custom sleek dark scrollbars (eliminates default white Windows scrollbars) */
+/* Professional Flat Dark Scrollbars */
 ::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
+  width: 8px;
+  height: 8px;
 }
 ::-webkit-scrollbar-track {
-  background: transparent;
+  background: #181818;
 }
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 999px;
-  border: 1px solid transparent;
-  background-clip: padding-box;
+  background: #3c3c3c;
+  border-radius: 0;
+  border: 1px solid #181818;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-  background-clip: padding-box;
+  background: #505050;
 }
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+  scrollbar-color: #3c3c3c #181818;
 }
 
 #app {
@@ -61,27 +80,26 @@ body {
   height: 100vh;
   box-sizing: border-box;
   background: var(--bg);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: 0;
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-  transition: border-radius 0.15s ease, border 0.15s ease;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
 }
 
 body.maximized #app {
   border: none;
-  border-radius: 0;
   box-shadow: none;
 }
 
-/* Top Bar */
+/* Top Bar / Titlebar */
 .topbar {
   --wails-draggable: drag;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 6px 0 6px 14px;
+  gap: 10px;
+  padding: 0 0 0 12px;
+  height: 34px;
   background: var(--panel);
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
@@ -96,11 +114,11 @@ body.maximized #app {
   --wails-draggable: no-drag;
 }
 
-/* Window Control Buttons (Minimize, Maximize, Close) */
+/* Window Controls (Minimize, Maximize, Close) */
 .win-controls {
   display: flex;
   align-items: stretch;
-  height: 36px;
+  height: 100%;
   margin-left: 4px;
   --wails-draggable: no-drag;
 }
@@ -117,56 +135,60 @@ body.maximized #app {
   justify-content: center;
   cursor: pointer;
   padding: 0 !important;
-  transition: background 0.12s ease, color 0.12s ease;
+  transition: background 0.1s ease, color 0.1s ease;
 }
 
 .win-btn:hover {
-  background: rgba(255, 255, 255, 0.08) !important;
-  color: var(--text) !important;
+  background: #333333 !important;
+  color: var(--text-bright) !important;
 }
 
 .win-btn.close:hover {
-  background: #e81123 !important;
-  color: #fff !important;
+  background: #c42b1c !important;
+  color: #ffffff !important;
 }
 
 .brand {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
 }
 
 .brand-icon {
-  width: 28px;
-  height: 28px;
-  border-radius: 7px;
-  background: linear-gradient(135deg, var(--cyan), var(--violet));
+  width: 20px;
+  height: 20px;
+  border-radius: 0;
+  background: #333333;
+  border: 1px solid var(--border-light);
   display: grid;
   place-items: center;
-  font-weight: 800;
-  color: #fff;
-  font-size: 14px;
+  font-weight: 700;
+  color: var(--accent);
+  font-size: 11px;
 }
 
 .brand-title {
   font-weight: 700;
-  font-size: 15px;
-  letter-spacing: 0.2px;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  color: var(--text-bright);
+  text-transform: uppercase;
 }
 
 .badge {
-  font-size: 11px;
-  padding: 2px 7px;
-  border-radius: 999px;
-  background: var(--panel-2);
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 0;
+  background: #202020;
   border: 1px solid var(--border);
   color: var(--muted);
+  font-family: var(--mono);
 }
 
 .topbar-center {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   min-width: 0;
   flex: 1;
   justify-content: center;
@@ -176,18 +198,19 @@ body.maximized #app {
   display: flex;
   align-items: center;
   gap: 8px;
-  background: var(--panel-2);
+  background: #202020;
   border: 1px solid var(--border);
-  padding: 5px 12px;
-  border-radius: 999px;
+  padding: 3px 10px;
+  border-radius: 0;
   max-width: 520px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-size: 11px;
 }
 
 .file-pill strong {
-  color: var(--text);
+  color: var(--text-bright);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -201,82 +224,98 @@ body.maximized #app {
 .topbar-right {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+  height: 100%;
 }
 
-/* Buttons */
+/* Professional Flat Buttons */
 button {
   font-family: inherit;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-light);
   background: var(--panel-2);
   color: var(--text);
-  padding: 6px 12px;
-  border-radius: 7px;
+  padding: 5px 10px;
+  border-radius: 0;
   cursor: pointer;
-  transition: all 0.14s ease;
+  transition: all 0.1s ease;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
+  line-height: 1.2;
 }
 
 button:hover:not(:disabled) {
-  border-color: var(--cyan);
-  background: #1c283d;
+  border-color: var(--border-focus);
+  background: var(--panel-hover);
+  color: var(--text-bright);
+}
+
+button:active:not(:disabled) {
+  background: var(--panel-active);
 }
 
 button:disabled {
-  opacity: 0.45;
+  opacity: 0.35;
   cursor: not-allowed;
+  border-color: var(--border);
 }
 
 button.primary {
-  background: linear-gradient(135deg, #0891b2, #4f46e5);
-  border-color: transparent;
-  color: #fff;
+  background: var(--accent-active);
+  border-color: var(--accent);
+  color: #ffffff;
 }
 
 button.primary:hover:not(:disabled) {
-  filter: brightness(1.1);
+  background: var(--accent);
+  border-color: var(--accent-hover);
+  color: #ffffff;
 }
 
 button.danger {
-  background: rgba(239, 68, 68, 0.16);
-  border-color: rgba(239, 68, 68, 0.5);
-  color: #fca5a5;
+  background: var(--red-bg);
+  border-color: var(--red);
+  color: #e57373;
+}
+
+button.danger:hover:not(:disabled) {
+  background: rgba(168, 70, 70, 0.28);
 }
 
 button.pill-active {
-  background: var(--cyan-glow);
-  border-color: var(--cyan);
-  color: #cffafe;
+  background: #383838;
+  border-color: var(--accent);
+  color: var(--text-bright);
 }
 
 .status-pill {
-  font-size: 11px;
-  padding: 5px 10px;
-  border-radius: 999px;
+  font-size: 10px;
+  padding: 3px 8px;
+  border-radius: 0;
+  font-family: var(--mono);
 }
 
 .status-pill.ok {
-  background: rgba(16, 185, 129, 0.14);
-  border-color: rgba(16, 185, 129, 0.4);
-  color: #6ee7b7;
+  background: var(--green-bg);
+  border-color: var(--green);
+  color: #98c998;
 }
 
 .status-pill.warn {
-  background: rgba(245, 158, 11, 0.16);
-  border-color: rgba(245, 158, 11, 0.5);
-  color: #fcd34d;
+  background: var(--amber-bg);
+  border-color: var(--amber);
+  color: #e0b06b;
 }
 
-/* Main Layout */
+/* Main Workspace Grid */
 .workspace {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 390px;
   flex: 1;
   min-height: 0;
+  background: var(--bg);
 }
 
 /* Left Stage */
@@ -285,17 +324,17 @@ button.pill-active {
   flex-direction: column;
   min-width: 0;
   min-height: 0;
-  padding: 14px;
-  gap: 12px;
+  padding: 10px;
+  gap: 10px;
 }
 
 .player-wrap {
   position: relative;
   flex: 1;
   min-height: 240px;
-  background: #05070b;
+  background: #141414;
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -315,47 +354,49 @@ video {
   width: 100%;
   height: 100%;
   object-fit: contain;
-  background: #000;
+  background: #000000;
 }
 
 .drop-overlay {
   position: absolute;
-  inset: 14px;
-  border: 2px dashed var(--border);
-  border-radius: var(--radius);
+  inset: 10px;
+  border: 1px dashed var(--border-light);
+  border-radius: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 8px;
   text-align: center;
   color: var(--muted);
-  background: rgba(11, 15, 23, 0.85);
+  background: rgba(20, 20, 20, 0.92);
   cursor: pointer;
 }
 
 .drop-overlay.drag-over {
-  border-color: var(--cyan);
-  background: rgba(6, 182, 212, 0.08);
-  color: var(--text);
+  border-color: var(--accent);
+  background: rgba(74, 130, 194, 0.08);
+  color: var(--text-bright);
 }
 
 .drop-overlay h2 {
   margin: 0;
-  font-size: 18px;
-  color: var(--text);
+  font-size: 16px;
+  color: var(--text-bright);
+  font-weight: 600;
 }
 
 .proxy-banner {
   position: absolute;
-  top: 10px;
-  left: 10px;
-  background: rgba(15, 23, 42, 0.85);
-  border: 1px solid var(--cyan);
-  color: #cffafe;
-  padding: 5px 10px;
-  border-radius: 6px;
-  font-size: 11px;
+  top: 8px;
+  left: 8px;
+  background: rgba(28, 28, 28, 0.92);
+  border: 1px solid var(--border-focus);
+  color: var(--text-bright);
+  padding: 4px 8px;
+  border-radius: 0;
+  font-size: 10px;
+  font-family: var(--mono);
   z-index: 5;
 }
 
@@ -368,51 +409,51 @@ video {
 
 .crop-box {
   position: absolute;
-  border: 2px solid var(--cyan);
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.58);
+  border: 1px solid #ffffff;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
   cursor: move;
   pointer-events: auto;
 }
 
 .crop-handle {
   position: absolute;
-  width: 11px;
-  height: 11px;
-  background: #fff;
-  border: 2px solid var(--cyan);
-  border-radius: 2px;
+  width: 9px;
+  height: 9px;
+  background: #ffffff;
+  border: 1px solid #000000;
+  border-radius: 0;
 }
-.crop-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
-.crop-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
-.crop-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
-.crop-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
+.crop-handle.nw { top: -5px; left: -5px; cursor: nwse-resize; }
+.crop-handle.ne { top: -5px; right: -5px; cursor: nesw-resize; }
+.crop-handle.sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
+.crop-handle.se { bottom: -5px; right: -5px; cursor: nwse-resize; }
 
 /* Transport Bar */
 .transport {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 6px;
   flex-wrap: wrap;
   background: var(--panel);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 8px 12px;
+  border-radius: 0;
+  padding: 6px 10px;
 }
 
 .transport-group {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
 }
 
 .time-readout {
   font-family: var(--mono);
-  font-size: 12px;
-  color: var(--text);
-  background: var(--bg);
+  font-size: 11px;
+  color: var(--text-bright);
+  background: #181818;
   padding: 4px 8px;
-  border-radius: 6px;
+  border-radius: 0;
   border: 1px solid var(--border);
 }
 
@@ -420,19 +461,19 @@ video {
 .timeline-card {
   background: var(--panel);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 10px 12px;
+  border-radius: 0;
+  padding: 8px 10px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .timeline-track {
   position: relative;
-  height: 54px;
-  background: #070a10;
+  height: 52px;
+  background: #121212;
   border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: 0;
   overflow: visible;
   cursor: pointer;
 }
@@ -443,14 +484,14 @@ video {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   overflow: hidden;
-  border-radius: 6px;
+  border-radius: 0;
 }
 
 .filmstrip img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  opacity: 0.72;
+  opacity: 0.7;
   pointer-events: none;
 }
 
@@ -459,27 +500,29 @@ video {
   position: absolute;
   top: 0;
   bottom: 0;
-  background: rgba(5, 7, 11, 0.72);
+  background: rgba(0, 0, 0, 0.75);
   pointer-events: none;
+  border-radius: 0;
 }
-
-.trim-dim-left { left: 0; border-radius: 6px 0 0 6px; }
-.trim-dim-right { right: 0; border-radius: 0 6px 6px 0; }
+.trim-dim-left { left: 0; }
+.trim-dim-right { right: 0; }
 
 .trim-selection {
   position: absolute;
   top: 0;
   bottom: 0;
-  border-top: 2px solid var(--cyan);
-  border-bottom: 2px solid var(--cyan);
+  background: var(--trim-band);
+  border-top: 2px solid var(--trim-in);
+  border-bottom: 2px solid var(--trim-in);
+  border-radius: 0;
   pointer-events: none;
 }
 
 .trim-handle {
   position: absolute;
-  top: -3px;
-  bottom: -3px;
-  width: 12px;
+  top: -2px;
+  bottom: -2px;
+  width: 10px;
   transform: translateX(-50%);
   cursor: ew-resize;
   z-index: 4;
@@ -490,31 +533,30 @@ video {
 
 .trim-handle::before {
   content: '';
-  width: 6px;
+  width: 5px;
   height: 100%;
-  border-radius: 3px;
+  border-radius: 0;
 }
 
 .trim-handle.start::before {
-  background: var(--cyan);
-  box-shadow: 0 0 8px var(--cyan);
+  background: var(--trim-in);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
 }
 
 .trim-handle.end::before {
-  background: var(--violet);
-  box-shadow: 0 0 8px var(--violet);
+  background: var(--trim-out);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
 }
 
 .playhead {
   position: absolute;
-  top: -5px;
-  bottom: -5px;
-  width: 2px;
-  background: #fff;
+  top: -4px;
+  bottom: -4px;
+  width: 1px;
+  background: #ffffff;
   transform: translateX(-50%);
   pointer-events: none;
   z-index: 5;
-  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
 }
 
 .playhead::before {
@@ -524,35 +566,38 @@ video {
   left: -4px;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 6px solid #fff;
+  border-top: 6px solid #4a82c2;
 }
 
 .trim-inputs {
   display: grid;
   grid-template-columns: 1fr 1fr auto auto auto;
-  gap: 8px;
+  gap: 6px;
   align-items: end;
 }
 
 .field-mini {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 2px;
 }
 
 .field-mini label {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
 }
 
 .stat-chip {
-  background: var(--bg);
+  background: #1a1a1a;
   border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 5px 9px;
+  border-radius: 0;
+  padding: 4px 8px;
   font-family: var(--mono);
-  font-size: 12px;
+  font-size: 11px;
   white-space: nowrap;
+  color: var(--text);
 }
 
 /* Right Settings Panel */
@@ -567,119 +612,141 @@ video {
 .settings-scroll {
   flex: 1;
   overflow-y: auto;
-  padding: 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.card {
-  background: var(--panel-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 12px;
+  padding: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
+.card {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 0;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .card-title {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.6px;
   color: var(--muted);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  border-bottom: 1px solid #353535;
+  padding-bottom: 4px;
 }
 
 .grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
+  gap: 6px;
 }
 
 .grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 6px;
+  gap: 5px;
 }
 
 .field {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 3px;
 }
 
 .field label {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--muted);
   display: flex;
   justify-content: space-between;
+  letter-spacing: 0.3px;
 }
 
 input[type='text'],
 input[type='number'],
 select {
   width: 100%;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text);
-  padding: 6px 8px;
-  border-radius: 6px;
+  background: #1c1c1c;
+  border: 1px solid var(--border-light);
+  color: var(--text-bright);
+  padding: 5px 7px;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 12px;
+  font-size: 11px;
   outline: none;
+  transition: border-color 0.1s ease;
 }
 
 input[type='text']:focus,
 input[type='number']:focus,
 select:focus {
-  border-color: var(--cyan);
+  border-color: var(--border-focus);
 }
 
 input.mono {
   font-family: var(--mono);
 }
 
+/* Premiere-Style Rectangular Slider */
 input[type='range'] {
   width: 100%;
-  accent-color: var(--cyan);
+  accent-color: var(--accent);
+  background: transparent;
+  cursor: pointer;
+  height: 16px;
 }
 
 .pill-row {
   display: flex;
-  gap: 5px;
+  gap: 4px;
   flex-wrap: wrap;
 }
 
 .pill-btn {
   padding: 4px 8px;
-  font-size: 11px;
-  border-radius: 6px;
+  font-size: 10px;
+  border-radius: 0;
+  background: #242424;
+  border: 1px solid var(--border-light);
+  color: var(--text);
+}
+
+.pill-btn:hover {
+  background: #333333;
+  color: var(--text-bright);
+}
+
+.pill-btn.pill-active {
+  background: #3c3c3c;
+  border-color: var(--border-focus);
+  color: #ffffff;
 }
 
 .track-list {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 4px;
 }
 
 .track-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  background: var(--bg);
+  gap: 7px;
+  font-size: 11px;
+  background: #202020;
   border: 1px solid var(--border);
-  padding: 5px 8px;
-  border-radius: 6px;
+  padding: 4px 7px;
+  border-radius: 0;
 }
 
 .input-row {
   display: flex;
-  gap: 6px;
+  gap: 5px;
 }
 
 .input-row input {
@@ -687,39 +754,39 @@ input[type='range'] {
 }
 
 .cli-box {
-  background: var(--bg);
+  background: #141414;
   border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 8px;
+  border-radius: 0;
+  padding: 6px 8px;
   font-family: var(--mono);
-  font-size: 11px;
-  color: #a5f3fc;
+  font-size: 10px;
+  color: #9e9e9e;
   word-break: break-all;
-  max-height: 90px;
+  max-height: 80px;
   overflow-y: auto;
   user-select: text;
 }
 
 /* Sticky Bottom Action */
 .action-footer {
-  padding: 12px 14px;
+  padding: 10px;
   border-top: 1px solid var(--border);
   background: var(--panel);
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .progress-wrap {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 4px;
 }
 
 .progress-bar-bg {
-  height: 8px;
-  background: var(--bg);
-  border-radius: 999px;
+  height: 6px;
+  background: #141414;
+  border-radius: 0;
   overflow: hidden;
   border: 1px solid var(--border);
 }
@@ -727,7 +794,8 @@ input[type='range'] {
 .progress-bar-fill {
   height: 100%;
   width: 0%;
-  background: linear-gradient(90deg, var(--cyan), var(--violet));
+  background: var(--accent);
+  border-radius: 0;
   transition: width 0.15s linear;
 }
 
@@ -735,26 +803,26 @@ input[type='range'] {
   display: flex;
   justify-content: space-between;
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: 10px;
   color: var(--muted);
 }
 
 .done-banner {
-  background: rgba(16, 185, 129, 0.12);
-  border: 1px solid rgba(16, 185, 129, 0.45);
-  border-radius: 8px;
-  padding: 9px 10px;
+  background: #1c261e;
+  border: 1px solid var(--green);
+  border-radius: 0;
+  padding: 8px;
   display: flex;
   flex-direction: column;
-  gap: 7px;
+  gap: 6px;
 }
 
 .error-banner {
-  background: rgba(239, 68, 68, 0.12);
-  border: 1px solid rgba(239, 68, 68, 0.45);
-  border-radius: 8px;
-  padding: 8px 10px;
-  color: #fca5a5;
+  background: #2b1d1d;
+  border: 1px solid var(--red);
+  border-radius: 0;
+  padding: 7px 8px;
+  color: #e57373;
   font-size: 11px;
   word-break: break-word;
   user-select: text;
diff --git a/main.go b/main.go
index c7a8981..ccf2c25 100644
--- a/main.go
+++ b/main.go
@@ -46,7 +46,7 @@ func main() {
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
-		BackgroundColour: &options.RGBA{R: 11, G: 15, B: 23, A: 1},
+		BackgroundColour: &options.RGBA{R: 28, G: 28, B: 28, A: 1},
 		Frameless:        true,
 		OnStartup:        app.startup,
 		OnShutdown:       app.shutdown,
@@ -57,12 +57,12 @@ func main() {
 		Windows: &windows.Options{
 			WebviewIsTransparent:              false,
 			WindowIsTranslucent:               false,
-			DisableFramelessWindowDecorations: false,
+			DisableFramelessWindowDecorations: true,
 			Theme:                             windows.Dark,
 			CustomTheme: &windows.ThemeSettings{
-				DarkModeTitleBar:  windows.RGB(17, 24, 39),
-				DarkModeTitleText: windows.RGB(241, 245, 249),
-				DarkModeBorder:    windows.RGB(36, 48, 68),
+				DarkModeTitleBar:  windows.RGB(37, 37, 37),
+				DarkModeTitleText: windows.RGB(212, 212, 212),
+				DarkModeBorder:    windows.RGB(56, 56, 56),
 			},
 		},
 		Bind: []interface{}{