style: redesign frontend to match a professional studio console aesthetic

index.html

@@ -16,21 +16,26 @@
     
     <style>
         :root {
-            --bg-color: #05060a;
-            --panel-bg: rgba(11, 14, 23, 0.75);
-            --sidebar-bg: #0b0e17;
-            --panel-border: rgba(60, 208, 162, 0.08);
+            --bg-color: #07090e;
+            --sidebar-bg: #0b0e16;
+            --panel-bg: #10141f;
+            --panel-border: #1e2638;
+            --panel-border-focus: #ff7235;
             --text-primary: #f8fafc;
-            --text-secondary: #94a3b8;
-            --accent-mint: #3cd0a2;
-            --accent-mint-hover: #5fe2b9;
-            --accent-mint-glow: rgba(60, 208, 162, 0.2);
-            --accent-dark-slate: #1e293b;
-            --accent-green: #10b981;
-            --radius-lg: 18px;
-            --radius-md: 12px;
-            --radius-sm: 8px;
-            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --text-secondary: #8a99ad;
+            --text-muted: #52637a;
+            --accent-copper: #ff7235;
+            --accent-copper-hover: #ff8954;
+            --accent-copper-glow: rgba(255, 114, 53, 0.15);
+            --accent-cyan: #00ebd4;
+            --accent-cyan-hover: #22ffe7;
+            --accent-cyan-glow: rgba(0, 235, 212, 0.12);
+            --accent-green: #00d58a;
+            --radius-lg: 8px;
+            --radius-md: 6px;
+            --radius-sm: 4px;
+            --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
         }
 
         * {
@@ -41,44 +46,45 @@
 
         body {
             background-color: var(--bg-color);
+            background-image: 
+                radial-gradient(rgba(255, 114, 53, 0.04) 1px, transparent 1px),
+                radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+            background-size: 24px 24px, 12px 12px;
+            background-position: 0 0, 6px 6px;
             color: var(--text-primary);
-            font-family: 'Inter', sans-serif;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
             min-height: 100vh;
             line-height: 1.5;
-            overflow: hidden; /* Sidebar controls scrolling */
+            overflow: hidden;
             position: relative;
         }
 
-        /* Ambient glowing circles using Resemble AI branding colors */
         body::before {
             content: '';
             position: absolute;
-            top: -10%;
-            left: 10%;
-            width: 45%;
-            height: 45%;
-            background: radial-gradient(circle, var(--accent-mint-glow) 0%, transparent 60%);
-            z-index: -1;
-            filter: blur(80px);
+            top: 16px;
+            left: 16px;
+            width: 24px;
+            height: 24px;
+            border-top: 2px solid rgba(255, 114, 53, 0.35);
+            border-left: 2px solid rgba(255, 114, 53, 0.35);
+            z-index: 1000;
             pointer-events: none;
-            opacity: 0.7;
         }
 
         body::after {
             content: '';
             position: absolute;
-            bottom: -5%;
-            right: 5%;
-            width: 40%;
-            height: 40%;
-            background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 60%);
-            z-index: -1;
-            filter: blur(80px);
+            bottom: 16px;
+            right: 16px;
+            width: 24px;
+            height: 24px;
+            border-bottom: 2px solid rgba(255, 114, 53, 0.35);
+            border-right: 2px solid rgba(255, 114, 53, 0.35);
+            z-index: 1000;
             pointer-events: none;
-            opacity: 0.5;
         }
 
-        /* Base Page Layout */
         .app-layout {
             display: flex;
             width: 100vw;
@@ -87,9 +93,8 @@
             overflow: hidden;
         }
 
-        /* ── Collapsible Sidebar ── */
         .sidebar {
-            width: 360px;
+            width: 350px;
             height: 100%;
             background-color: var(--sidebar-bg);
             border-right: 1px solid var(--panel-border);
@@ -97,30 +102,32 @@
             flex-direction: column;
             position: relative;
             z-index: 100;
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
+            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 6px 0 24px rgba(0, 0, 0, 0.3);
             flex-shrink: 0;
         }
 
         .sidebar.collapsed {
-            margin-left: -360px;
+            margin-left: -350px;
             transform: translateX(-100%);
         }
 
         .sidebar-header {
-            padding: 20px 24px;
+            padding: 16px 20px;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+            border-bottom: 1px solid var(--panel-border);
+            background: rgba(0, 0, 0, 0.15);
         }
 
         .sidebar-title {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.1rem;
+            font-family: var(--font-mono);
+            font-size: 0.8rem;
             font-weight: 700;
-            color: #ffffff;
-            letter-spacing: 0.5px;
+            color: var(--text-primary);
+            letter-spacing: 1.5px;
+            text-transform: uppercase;
             display: flex;
             align-items: center;
             gap: 8px;
@@ -130,32 +137,32 @@
             background: none;
             border: none;
             color: var(--text-secondary);
-            font-size: 1.1rem;
+            font-size: 0.9rem;
             cursor: pointer;
             transition: var(--transition);
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 4px;
+            border-radius: var(--radius-sm);
         }
 
         .sidebar-close-btn:hover {
-            color: #ffffff;
-            transform: scale(1.1);
+            color: var(--accent-copper);
+            background: rgba(255, 255, 255, 0.03);
         }
 
         .sidebar-scrollable {
             flex: 1;
             overflow-y: auto;
-            padding: 24px;
+            padding: 20px;
             display: flex;
             flex-direction: column;
-            gap: 24px;
+            gap: 20px;
         }
 
-        /* Scrollbar styles for sidebar */
         .sidebar-scrollable::-webkit-scrollbar {
-            width: 5px;
+            width: 4px;
         }
 
         .sidebar-scrollable::-webkit-scrollbar-track {
@@ -163,15 +170,14 @@
         }
 
         .sidebar-scrollable::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 3px;
+            background: var(--panel-border);
+            border-radius: 2px;
         }
 
         .sidebar-scrollable::-webkit-scrollbar-thumb:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: var(--text-muted);
         }
 
-        /* ── Main Workspace Area ── */
         .content-area {
             flex: 1;
             height: 100%;
@@ -182,88 +188,83 @@
             transition: var(--transition);
         }
 
-        /* Main Scrollable wrapper */
         .content-container {
             width: 100%;
-            max-width: 840px;
+            max-width: 800px;
             margin: 0 auto;
-            padding: 24px 20px 60px 20px;
+            padding: 24px 24px 60px 24px;
             display: flex;
             flex-direction: column;
-            gap: 24px;
+            gap: 20px;
         }
 
         header {
             display: flex;
             flex-direction: column;
-            align-items: center;
-            text-align: center;
-            padding: 20px 0 10px 0;
-            gap: 12px;
+            align-items: flex-start;
+            text-align: left;
+            padding: 12px 0 20px 0;
+            gap: 8px;
             position: relative;
+            border-bottom: 1px solid var(--panel-border);
         }
 
         .logo-area {
             display: flex;
             align-items: center;
             gap: 12px;
+            flex-wrap: wrap;
         }
 
         .logo-emoji {
-            font-size: 2.2rem;
-            animation: float 3s ease-in-out infinite;
-        }
-
-        @keyframes float {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-5px); }
+            font-size: 1.6rem;
+            color: var(--accent-copper);
         }
 
         h1 {
-            font-family: 'Outfit', sans-serif;
-            font-size: 2.4rem;
+            font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
+            font-size: 1.8rem;
             font-weight: 800;
-            background: linear-gradient(135deg, #ffffff 40%, var(--accent-mint) 80%, #76ecd4 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
+            color: #ffffff;
+            letter-spacing: 0.5px;
+            text-transform: uppercase;
         }
 
         .brand-badge {
-            font-size: 0.75rem;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
             font-weight: 600;
-            background: rgba(60, 208, 162, 0.1);
-            color: var(--accent-mint);
-            border: 1px solid rgba(60, 208, 162, 0.2);
-            padding: 3px 8px;
-            border-radius: 30px;
+            background: rgba(255, 114, 53, 0.08);
+            color: var(--accent-copper);
+            border: 1px solid rgba(255, 114, 53, 0.2);
+            padding: 2px 6px;
+            border-radius: var(--radius-sm);
             text-transform: uppercase;
             letter-spacing: 0.5px;
         }
 
         .subtitle {
-            font-size: 0.95rem;
+            font-size: 0.88rem;
             color: var(--text-secondary);
             font-weight: 400;
         }
 
         .ltx-banner {
-            background: rgba(22, 28, 45, 0.3);
+            background: #0f131d;
             border: 1px solid var(--panel-border);
-            border-left: 3px solid var(--accent-mint);
+            border-left: 3px solid var(--accent-copper);
             border-radius: var(--radius-md);
-            padding: 12px 18px;
+            padding: 12px 16px;
             color: #cbd5e1;
-            font-size: 0.82rem;
+            font-size: 0.8rem;
             line-height: 1.5;
             text-align: left;
-            backdrop-filter: blur(10px);
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
             width: 100%;
         }
 
         .ltx-banner a {
-            color: var(--accent-mint);
+            color: var(--accent-copper);
             font-weight: 600;
             text-decoration: none;
             transition: var(--transition);
@@ -274,52 +275,50 @@
             text-decoration: underline;
         }
 
-        /* Sliding Toggle Controls Button */
         .btn-toggle-sidebar {
-            background: rgba(255, 255, 255, 0.03);
+            background: #111520;
             border: 1px solid var(--panel-border);
             color: #ffffff;
-            font-size: 0.85rem;
+            font-family: var(--font-mono);
+            font-size: 0.72rem;
             font-weight: 600;
-            padding: 10px 16px;
-            border-radius: 30px;
+            padding: 8px 14px;
+            border-radius: var(--radius-sm);
             cursor: pointer;
             display: flex;
             align-items: center;
             gap: 8px;
             transition: var(--transition);
             outline: none;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            letter-spacing: 0.5px;
+            text-transform: uppercase;
         }
 
         .btn-toggle-sidebar:hover {
-            background: rgba(60, 208, 162, 0.05);
-            border-color: var(--accent-mint);
-            transform: translateY(-1px);
+            background: rgba(255, 114, 53, 0.05);
+            border-color: var(--accent-copper);
         }
 
-        /* ── Modern Script Panels (Main Area) ── */
         .main-panel {
             background: var(--panel-bg);
             border: 1px solid var(--panel-border);
             border-radius: var(--radius-lg);
-            padding: 24px;
-            backdrop-filter: blur(20px);
-            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
+            padding: 20px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
             display: flex;
             flex-direction: column;
-            gap: 20px;
-            transition: var(--transition);
+            gap: 16px;
         }
 
         .form-group {
             display: flex;
             flex-direction: column;
-            gap: 8px;
+            gap: 6px;
         }
 
         .form-label {
-            font-size: 0.78rem;
+            font-family: var(--font-mono);
+            font-size: 0.72rem;
             font-weight: 700;
             text-transform: uppercase;
             letter-spacing: 0.8px;
@@ -330,71 +329,69 @@
         }
 
         .label-badge {
-            font-size: 0.75rem;
-            color: var(--accent-mint);
-            text-transform: none;
-            font-weight: 400;
-            letter-spacing: 0;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            font-weight: 500;
+            letter-spacing: 0.3px;
         }
 
         .textarea-custom {
             width: 100%;
-            background: rgba(5, 7, 12, 0.8);
+            background: #090c13;
             border: 1px solid var(--panel-border);
             border-radius: var(--radius-md);
-            padding: 16px;
+            padding: 14px;
             color: var(--text-primary);
             font-family: 'Inter', sans-serif;
-            font-size: 1rem;
-            line-height: 1.6;
+            font-size: 0.92rem;
+            line-height: 1.55;
             resize: vertical;
-            min-height: 140px;
+            min-height: 120px;
             outline: none;
             transition: var(--transition);
         }
 
         .textarea-custom:focus {
-            border-color: var(--accent-mint);
-            box-shadow: 0 0 15px var(--accent-mint-glow);
-            background: rgba(5, 7, 12, 0.95);
+            border-color: var(--accent-copper);
+            box-shadow: 0 0 0 2px var(--accent-copper-glow);
         }
 
-        /* Reference Uploader Inside Sidebar */
         .upload-zone {
-            border: 2px dashed rgba(60, 208, 162, 0.2);
+            border: 1px dashed var(--panel-border);
             border-radius: var(--radius-md);
-            padding: 18px;
+            padding: 16px;
             text-align: center;
             cursor: pointer;
-            background: rgba(60, 208, 162, 0.01);
+            background: rgba(255, 255, 255, 0.01);
             display: flex;
             flex-direction: column;
             align-items: center;
             gap: 6px;
             transition: var(--transition);
-            min-height: 90px;
+            min-height: 80px;
             justify-content: center;
         }
 
         .upload-zone:hover, .upload-zone.dragover {
-            border-color: var(--accent-mint);
-            background: rgba(60, 208, 162, 0.04);
+            border-color: var(--accent-copper);
+            background: rgba(255, 114, 53, 0.02);
         }
 
         .upload-icon {
-            font-size: 1.6rem;
-            color: var(--accent-mint);
-            transition: var(--transition);
+            font-size: 1.3rem;
+            color: var(--accent-copper);
         }
 
         .upload-text {
-            font-size: 0.8rem;
+            font-size: 0.76rem;
             color: var(--text-secondary);
         }
 
         .upload-text strong {
             color: #ffffff;
-            font-weight: 500;
+            font-weight: 600;
         }
 
         .hidden-input {
@@ -405,9 +402,9 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            background: rgba(60, 208, 162, 0.06);
-            border: 1px solid rgba(60, 208, 162, 0.2);
-            padding: 10px 14px;
+            background: rgba(255, 114, 53, 0.05);
+            border: 1px solid rgba(255, 114, 53, 0.2);
+            padding: 8px 12px;
             border-radius: var(--radius-md);
             width: 100%;
         }
@@ -415,8 +412,9 @@
         .file-info {
             display: flex;
             align-items: center;
-            gap: 10px;
-            font-size: 0.82rem;
+            gap: 8px;
+            font-size: 0.78rem;
+            font-family: var(--font-mono);
             font-weight: 500;
             overflow: hidden;
             white-space: nowrap;
@@ -427,158 +425,163 @@
             background: none;
             border: none;
             color: var(--text-secondary);
-            font-size: 0.95rem;
+            font-size: 0.9rem;
             cursor: pointer;
             transition: var(--transition);
             padding: 2px;
             display: flex;
             align-items: center;
             justify-content: center;
+            border-radius: var(--radius-sm);
         }
 
         .btn-clear:hover {
             color: #ffffff;
-            transform: scale(1.1);
+            background: rgba(255, 255, 255, 0.05);
         }
 
-        /* Modernized Sidebar Dashboard Items */
         .settings-block {
             display: flex;
             flex-direction: column;
-            gap: 16px;
-            background: rgba(255, 255, 255, 0.01);
-            border: 1px solid rgba(255, 255, 255, 0.03);
-            padding: 16px;
+            gap: 14px;
+            background: rgba(0, 0, 0, 0.1);
+            border: 1px solid var(--panel-border);
+            padding: 14px;
             border-radius: var(--radius-md);
         }
 
         .settings-block-title {
-            font-family: 'Outfit', sans-serif;
-            font-size: 0.85rem;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
             font-weight: 700;
-            letter-spacing: 0.5px;
+            letter-spacing: 0.8px;
             text-transform: uppercase;
             color: #ffffff;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-            padding-bottom: 8px;
-            margin-bottom: 4px;
+            border-bottom: 1px solid var(--panel-border);
+            padding-bottom: 6px;
+            margin-bottom: 2px;
         }
 
         .slider-group {
             display: flex;
             flex-direction: column;
-            gap: 6px;
+            gap: 4px;
         }
 
         .slider-meta {
             display: flex;
             justify-content: space-between;
-            font-size: 0.8rem;
+            font-size: 0.75rem;
             color: var(--text-secondary);
             font-weight: 500;
         }
 
         .slider-value {
-            color: var(--accent-mint);
+            color: var(--accent-copper);
             font-weight: 700;
-            font-family: monospace;
+            font-family: var(--font-mono);
+            background: rgba(255, 114, 53, 0.05);
+            padding: 1px 4px;
+            border-radius: var(--radius-sm);
+            border: 1px solid rgba(255, 114, 53, 0.15);
         }
 
         input[type="range"] {
             -webkit-appearance: none;
             width: 100%;
-            height: 4px;
-            background: rgba(255, 255, 255, 0.06);
-            border-radius: 2px;
+            height: 6px;
+            background: #090c13;
+            border: 1px solid var(--panel-border);
+            border-radius: 3px;
             outline: none;
             cursor: pointer;
         }
 
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: var(--accent-mint);
-            box-shadow: 0 0 8px var(--accent-mint-glow);
+            width: 10px;
+            height: 16px;
+            border-radius: 2px;
+            background: var(--accent-copper);
+            border: 1px solid #ffffff;
+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
             transition: var(--transition);
         }
 
         input[type="range"]::-webkit-slider-thumb:hover {
-            transform: scale(1.2);
             background: #ffffff;
+            transform: scale(1.1);
         }
 
-        /* Seed Elements */
         .seed-row {
             display: flex;
-            gap: 8px;
+            gap: 6px;
             align-items: center;
         }
 
         .input-seed {
             flex: 1;
-            background: rgba(5, 7, 12, 0.8);
-            border: 1px solid rgba(255, 255, 255, 0.04);
+            background: #090c13;
+            border: 1px solid var(--panel-border);
             border-radius: var(--radius-sm);
-            padding: 8px 12px;
+            padding: 6px 10px;
             color: var(--text-primary);
-            font-family: monospace;
+            font-family: var(--font-mono);
             outline: none;
-            font-size: 0.85rem;
+            font-size: 0.8rem;
             transition: var(--transition);
-            height: 38px;
+            height: 32px;
         }
 
         .input-seed:focus {
-            border-color: var(--accent-mint);
+            border-color: var(--accent-copper);
         }
 
         .btn-seed-random {
-            background: rgba(255, 255, 255, 0.03);
-            border: 1px solid rgba(255, 255, 255, 0.04);
+            background: #19202f;
+            border: 1px solid var(--panel-border);
             border-radius: var(--radius-sm);
             color: var(--text-primary);
-            height: 38px;
-            width: 38px;
+            height: 32px;
+            width: 32px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: var(--transition);
-            font-size: 0.9rem;
+            font-size: 0.8rem;
         }
 
         .btn-seed-random:hover {
-            background: rgba(60, 208, 162, 0.05);
-            border-color: var(--accent-mint);
+            background: rgba(255, 114, 53, 0.05);
+            border-color: var(--accent-copper);
         }
 
-        /* Glowing Resemble Green Button */
         .btn-generate {
-            background: linear-gradient(135deg, var(--accent-mint) 0%, #2ac596 100%);
+            background: var(--accent-copper);
             border: none;
             border-radius: var(--radius-md);
             color: #07090e;
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.05rem;
-            font-weight: 800;
-            padding: 14px;
+            font-family: var(--font-mono);
+            font-size: 0.9rem;
+            font-weight: 700;
+            padding: 12px;
             cursor: pointer;
             transition: var(--transition);
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 10px;
-            box-shadow: 0 6px 20px var(--accent-mint-glow);
-            min-height: 48px;
-            letter-spacing: 0.3px;
+            gap: 8px;
+            box-shadow: 0 4px 12px var(--accent-copper-glow);
+            min-height: 42px;
+            letter-spacing: 1px;
+            text-transform: uppercase;
         }
 
         .btn-generate:hover:not(:disabled) {
-            transform: translateY(-1.5px);
-            box-shadow: 0 10px 25px rgba(60, 208, 162, 0.4);
-            background: linear-gradient(135deg, var(--accent-mint-hover) 0%, var(--accent-mint) 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(255, 114, 53, 0.35);
+            background: var(--accent-copper-hover);
         }
 
         .btn-generate:active:not(:disabled) {
@@ -586,23 +589,23 @@
         }
 
         .btn-generate:disabled {
-            background: #161a24;
-            color: #3b4255;
+            background: #19202f;
+            color: var(--text-muted);
+            border: 1px solid var(--panel-border);
             cursor: not-allowed;
             box-shadow: none;
         }
 
-        /* ── Output Lounge (Visual Player Deck) ── */
         .output-wrapper {
-            background: rgba(5, 7, 12, 0.5);
+            background: #090c13;
             border: 1px solid var(--panel-border);
             border-radius: var(--radius-md);
-            padding: 20px;
+            padding: 16px;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            min-height: 140px;
+            min-height: 120px;
             position: relative;
         }
 
@@ -612,95 +615,98 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 10px;
+            gap: 8px;
         }
 
         .empty-icon {
-            font-size: 2.2rem;
-            opacity: 0.4;
-            color: var(--accent-mint);
+            font-size: 1.8rem;
+            opacity: 0.5;
+            color: var(--accent-copper);
         }
 
         .empty-text {
-            font-size: 0.85rem;
+            font-family: var(--font-mono);
+            font-size: 0.72rem;
+            letter-spacing: 0.5px;
+            text-transform: uppercase;
         }
 
-        /* Glowing Custom Player Layout */
         .audio-player {
             width: 100%;
             display: flex;
             flex-direction: column;
-            gap: 14px;
+            gap: 12px;
         }
 
         .visualizer-box {
             width: 100%;
-            height: 44px;
-            background: linear-gradient(90deg, rgba(60, 208, 162, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);
+            height: 38px;
+            background: #06090e;
             border-radius: var(--radius-sm);
             display: flex;
             align-items: center;
             justify-content: center;
-            border: 1px solid rgba(60, 208, 162, 0.04);
+            border: 1px solid var(--panel-border);
             overflow: hidden;
         }
 
         .visualizer-wave {
             display: flex;
             align-items: center;
-            gap: 3px;
+            gap: 2px;
             height: 100%;
         }
 
         .wave-bar {
             width: 3px;
-            height: 5px;
-            background: var(--accent-mint);
+            height: 4px;
+            background: var(--accent-cyan);
             border-radius: 1px;
             transition: var(--transition);
         }
 
         .audio-player.playing .wave-bar {
-            animation: playWave 1.2s infinite ease-in-out alternate;
+            animation: playWave 1s infinite ease-in-out alternate;
         }
 
         @keyframes playWave {
-            0% { height: 5px; }
-            100% { height: 28px; }
+            0% { height: 4px; }
+            100% { height: 26px; }
         }
 
-        .wave-bar:nth-child(2n) { background: #5fe2b9; animation-delay: 0.15s; }
-        .wave-bar:nth-child(3n) { animation-delay: 0.3s; }
-        .wave-bar:nth-child(4n) { animation-delay: 0.45s; }
-        .wave-bar:nth-child(5n) { background: var(--accent-mint); animation-delay: 0.6s; }
+        .wave-bar:nth-child(2n) { background: #00d084; animation-delay: 0.1s; }
+        .wave-bar:nth-child(3n) { background: #00ebd4; animation-delay: 0.2s; }
+        .wave-bar:nth-child(4n) { background: #008aff; animation-delay: 0.3s; }
+        .wave-bar:nth-child(5n) { background: var(--accent-cyan); animation-delay: 0.4s; }
 
         .player-row {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 10px;
             width: 100%;
         }
 
         .btn-play {
-            background: #ffffff;
+            background: var(--accent-cyan);
             border: none;
-            color: var(--bg-color);
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
+            color: #07090e;
+            width: 34px;
+            height: 34px;
+            border-radius: var(--radius-sm);
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1rem;
+            font-size: 0.9rem;
             cursor: pointer;
             transition: var(--transition);
-            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
+            box-shadow: 0 2px 8px var(--accent-cyan-glow);
             flex-shrink: 0;
         }
 
         .btn-play:hover {
-            transform: scale(1.05);
-            box-shadow: 0 6px 18px rgba(255, 255, 255, 0.3);
+            transform: scale(1.03);
+            background: var(--accent-cyan-hover);
+            box-shadow: 0 4px 12px rgba(0, 235, 212, 0.3);
         }
 
         .progress-box {
@@ -713,14 +719,14 @@
         .time-lbl {
             font-size: 0.72rem;
             color: var(--text-secondary);
-            font-family: monospace;
+            font-family: var(--font-mono);
             min-width: 32px;
         }
 
-        /* Secondary progress slider bar track styling */
         .progress-box input[type="range"]::-webkit-slider-thumb {
-            background: #ffffff;
-            box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
+            background: var(--accent-cyan);
+            border-color: #ffffff;
+            box-shadow: 0 1px 4px rgba(0, 235, 212, 0.4);
         }
 
         .deck-footer {
@@ -728,9 +734,9 @@
             align-items: center;
             justify-content: space-between;
             width: 100%;
-            border-top: 1px solid rgba(255, 255, 255, 0.04);
-            padding-top: 12px;
-            gap: 12px;
+            border-top: 1px solid var(--panel-border);
+            padding-top: 10px;
+            gap: 10px;
             flex-wrap: wrap;
         }
 
@@ -738,12 +744,12 @@
             display: flex;
             align-items: center;
             gap: 6px;
-            max-width: 90px;
+            max-width: 80px;
             flex-shrink: 0;
         }
 
         .vol-icon {
-            font-size: 0.8rem;
+            font-size: 0.72rem;
             color: var(--text-secondary);
         }
 
@@ -758,11 +764,12 @@
         }
 
         .btn-speed {
-            background: rgba(255, 255, 255, 0.02);
-            border: 1px solid rgba(255, 255, 255, 0.04);
-            border-radius: 6px;
+            background: #19202f;
+            border: 1px solid var(--panel-border);
+            border-radius: var(--radius-sm);
             color: var(--text-secondary);
-            font-size: 0.68rem;
+            font-family: var(--font-mono);
+            font-size: 0.65rem;
             font-weight: 600;
             padding: 3px 6px;
             cursor: pointer;
@@ -770,38 +777,41 @@
         }
 
         .btn-speed.active, .btn-speed:hover {
-            background: rgba(60, 208, 162, 0.06);
-            color: var(--accent-mint);
-            border-color: rgba(60, 208, 162, 0.2);
+            background: rgba(0, 235, 212, 0.08);
+            color: var(--accent-cyan);
+            border-color: rgba(0, 235, 212, 0.25);
         }
 
         .btn-download-wav {
-            background: rgba(255, 255, 255, 0.04);
+            background: #19202f;
             border: 1px solid var(--panel-border);
             border-radius: var(--radius-sm);
             color: #ffffff;
-            font-size: 0.78rem;
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
             font-weight: 600;
-            padding: 6px 12px;
+            padding: 4px 10px;
             text-decoration: none;
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 5px;
             transition: var(--transition);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
 
         .btn-download-wav:hover {
-            background: var(--accent-mint);
+            background: var(--accent-copper);
             color: #07090e;
-            border-color: var(--accent-mint);
-            transform: translateY(-1px);
+            border-color: var(--accent-copper);
+            transform: translateY(-0.5px);
         }
 
         @media (max-width: 480px) {
             .deck-footer {
                 flex-direction: column;
                 align-items: stretch;
-                gap: 12px;
+                gap: 10px;
             }
             .vol-slider {
                 max-width: 100%;
@@ -814,42 +824,44 @@
             }
         }
 
-        /* Synchronizer Status Alert */
         .status-alert {
             display: flex;
             align-items: center;
-            gap: 10px;
-            font-size: 0.82rem;
-            font-weight: 500;
-            padding: 10px 14px;
+            gap: 8px;
+            font-family: var(--font-mono);
+            font-size: 0.72rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            padding: 8px 12px;
             border-radius: var(--radius-md);
             border: 1px solid transparent;
             display: none;
-            margin-bottom: 12px;
+            margin-bottom: 10px;
             width: 100%;
+            letter-spacing: 0.5px;
         }
 
         .status-alert.success {
-            background: rgba(16, 185, 129, 0.04);
-            border-color: rgba(16, 185, 129, 0.15);
+            background: rgba(0, 213, 138, 0.05);
+            border-color: rgba(0, 213, 138, 0.2);
             color: var(--accent-green);
         }
 
         .status-alert.info {
-            background: rgba(60, 208, 162, 0.04);
-            border-color: rgba(60, 208, 162, 0.15);
-            color: #8bead0;
+            background: rgba(255, 114, 53, 0.05);
+            border-color: rgba(255, 114, 53, 0.2);
+            color: #ff854f;
         }
 
         .status-alert.error {
-            background: rgba(239, 68, 68, 0.04);
-            border-color: rgba(239, 68, 68, 0.15);
+            background: rgba(239, 68, 68, 0.05);
+            border-color: rgba(239, 68, 68, 0.2);
             color: #f87171;
         }
 
         .alert-spinner {
-            width: 14px;
-            height: 14px;
+            width: 12px;
+            height: 12px;
             border: 2px solid rgba(255, 255, 255, 0.1);
             border-top: 2px solid currentColor;
             border-radius: 50%;
@@ -861,46 +873,45 @@
             100% { transform: rotate(360deg); }
         }
 
-        /* Demo deck scrollable inside sidebar */
         .demo-capsules {
             display: flex;
             flex-direction: column;
-            gap: 8px;
+            gap: 6px;
         }
 
         .demo-pill {
-            background: rgba(255, 255, 255, 0.01);
-            border: 1px solid rgba(255, 255, 255, 0.04);
+            background: #111520;
+            border: 1px solid var(--panel-border);
             border-radius: var(--radius-md);
-            padding: 10px 14px;
+            padding: 8px 12px;
             cursor: pointer;
             transition: var(--transition);
             display: flex;
             justify-content: space-between;
             align-items: center;
-            gap: 12px;
+            gap: 10px;
             text-align: left;
         }
 
         .demo-pill:hover {
-            background: rgba(60, 208, 162, 0.02);
-            border-color: rgba(60, 208, 162, 0.15);
-            transform: translateX(2px);
+            background: rgba(255, 114, 53, 0.02);
+            border-color: rgba(255, 114, 53, 0.2);
+            transform: translateX(1px);
         }
 
         .demo-pill.active {
-            border-color: var(--accent-mint);
-            background: rgba(60, 208, 162, 0.03);
+            border-color: var(--accent-copper);
+            background: rgba(255, 114, 53, 0.05);
         }
 
         .demo-pill-title {
-            font-size: 0.82rem;
+            font-size: 0.76rem;
             font-weight: 600;
             color: #ffffff;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            max-width: 170px;
+            max-width: 160px;
         }
 
         .pill-labels {
@@ -910,20 +921,21 @@
         }
 
         .pill-badge {
-            font-size: 0.65rem;
+            font-family: var(--font-mono);
+            font-size: 0.6rem;
             font-weight: 700;
-            padding: 1px 5px;
-            border-radius: 4px;
+            padding: 1px 4px;
+            border-radius: var(--radius-sm);
             text-transform: uppercase;
         }
 
-        .pill-badge-male { background: rgba(59, 130, 246, 0.08); color: #60a5fa; }
-        .pill-badge-female { background: rgba(236, 72, 153, 0.08); color: #f472b6; }
-        .pill-badge-long { background: rgba(139, 92, 246, 0.08); color: #c084fc; }
+        .pill-badge-male { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
+        .pill-badge-female { background: rgba(236, 72, 153, 0.1); color: #f472b6; }
+        .pill-badge-long { background: rgba(139, 92, 246, 0.1); color: #c084fc; }
 
-        /* Guide container inside sidebar */
         .guide-header {
-            font-size: 0.82rem;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
             font-weight: 700;
             color: #ffffff;
             cursor: pointer;
@@ -932,56 +944,56 @@
             align-items: center;
             user-select: none;
             text-transform: uppercase;
-            letter-spacing: 0.5px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-            padding-bottom: 8px;
-            margin-bottom: 4px;
+            letter-spacing: 0.8px;
+            border-bottom: 1px solid var(--panel-border);
+            padding-bottom: 6px;
+            margin-bottom: 2px;
         }
 
         .guide-body {
             max-height: 0;
             overflow: hidden;
-            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            font-size: 0.78rem;
+            transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            font-size: 0.74rem;
             color: var(--text-secondary);
             display: flex;
             flex-direction: column;
-            gap: 12px;
-            line-height: 1.55;
+            gap: 10px;
+            line-height: 1.5;
         }
 
         .guide-body.open {
             max-height: 380px;
-            margin-top: 12px;
+            margin-top: 10px;
         }
 
         .guide-block-title {
             color: #ffffff;
-            font-weight: 600;
+            font-family: var(--font-mono);
+            font-weight: 700;
             margin-bottom: 2px;
-            font-size: 0.78rem;
+            font-size: 0.74rem;
+            text-transform: uppercase;
         }
 
         .guide-list {
-            padding-left: 14px;
+            padding-left: 12px;
             display: flex;
             flex-direction: column;
-            gap: 3px;
+            gap: 2px;
         }
 
-        /* ── Sidebar backdrop overlay (mobile and smaller desktops) ── */
         .sidebar-overlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100vw;
             height: 100vh;
-            background: rgba(0, 0, 0, 0.5);
-            backdrop-filter: blur(4px);
+            background: rgba(0, 0, 0, 0.65);
             z-index: 90;
             opacity: 0;
             pointer-events: none;
-            transition: opacity 0.3s ease;
+            transition: opacity 0.2s ease;
         }
 
         .sidebar-overlay.active {
@@ -991,14 +1003,16 @@
 
         footer {
             margin-top: auto;
-            text-align: center;
-            padding: 30px 20px;
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-            border-top: 1px solid rgba(255, 255, 255, 0.03);
+            text-align: left;
+            padding: 24px 0;
+            font-family: var(--font-mono);
+            font-size: 0.68rem;
+            color: var(--text-muted);
+            border-top: 1px solid var(--panel-border);
+            text-transform: uppercase;
+            letter-spacing: 0.3px;
         }
 
-        /* ── Mobile and Tablet Adaptations ── */
         @media (max-width: 992px) {
             .sidebar {
                 position: fixed;
@@ -1012,29 +1026,29 @@
                 transform: translateX(-100%);
             }
             h1 {
-                font-size: 2rem;
+                font-size: 1.6rem;
             }
             .logo-emoji {
-                font-size: 1.8rem;
+                font-size: 1.4rem;
             }
         }
 
         @media (min-width: 993px) {
             .sidebar-close-btn {
-                display: none; /* Only show toggle trigger on desktop */
+                display: none;
             }
         }
 
-        /* ── Premium Audio Trimmer Widget ── */
         .audio-trimmer-container {
             display: flex;
             flex-direction: column;
-            gap: 12px;
-            background: rgba(255, 255, 255, 0.02);
-            border: 1px solid rgba(60, 208, 162, 0.15);
+            gap: 10px;
+            background: rgba(0, 0, 0, 0.15);
+            border: 1px solid var(--panel-border);
+            border-left: 2px solid var(--accent-copper);
             border-radius: var(--radius-md);
-            padding: 14px;
-            margin-top: 10px;
+            padding: 12px;
+            margin-top: 8px;
             transition: var(--transition);
         }
 
@@ -1042,8 +1056,8 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            padding-bottom: 8px;
+            border-bottom: 1px solid var(--panel-border);
+            padding-bottom: 6px;
         }
 
         .trimmer-file-info {
@@ -1054,17 +1068,18 @@
         }
 
         .trimmer-file-icon {
-            font-size: 1.1rem;
+            font-size: 0.95rem;
         }
 
         .trimmer-filename {
-            font-size: 0.8rem;
+            font-family: var(--font-mono);
+            font-size: 0.74rem;
             color: var(--text-primary);
             font-weight: 500;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            max-width: 170px;
+            max-width: 160px;
         }
 
         .btn-clear-trimmer {
@@ -1072,9 +1087,9 @@
             border: none;
             color: var(--text-secondary);
             cursor: pointer;
-            font-size: 0.9rem;
+            font-size: 0.8rem;
             padding: 4px;
-            border-radius: 50%;
+            border-radius: var(--radius-sm);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -1082,16 +1097,16 @@
         }
 
         .btn-clear-trimmer:hover {
-            color: #ef4444;
-            background: rgba(239, 68, 68, 0.1);
+            color: #f87171;
+            background: rgba(239, 68, 68, 0.05);
         }
 
         .trimmer-waveform-box {
             position: relative;
             width: 100%;
-            height: 64px;
-            background: rgba(0, 0, 0, 0.3);
-            border: 1px solid rgba(255, 255, 255, 0.05);
+            height: 52px;
+            background: #06090e;
+            border: 1px solid var(--panel-border);
             border-radius: var(--radius-sm);
             overflow: hidden;
         }
@@ -1106,8 +1121,10 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            font-size: 0.75rem;
-            margin-bottom: -4px;
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            margin-bottom: -2px;
         }
 
         .duration-title {
@@ -1115,81 +1132,83 @@
         }
 
         .duration-val {
-            color: var(--accent-mint);
-            font-family: monospace;
+            color: var(--accent-copper);
             font-weight: 700;
         }
 
         .trim-slider-group {
             display: flex;
             flex-direction: column;
-            gap: 4px;
+            gap: 2px;
         }
 
         .trim-slider-meta {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            font-size: 0.75rem;
+            font-size: 0.7rem;
+            font-family: var(--font-mono);
+            text-transform: uppercase;
             color: var(--text-secondary);
         }
 
         .trim-value-label {
-            color: var(--accent-mint);
-            font-family: monospace;
+            color: var(--accent-copper);
             font-weight: 600;
         }
 
         .trimmer-controls {
             display: flex;
-            gap: 8px;
-            margin-top: 4px;
+            gap: 6px;
+            margin-top: 2px;
         }
 
         .btn-trimmer-control {
             flex: 1;
-            padding: 8px 12px;
-            font-size: 0.75rem;
-            font-weight: 600;
+            padding: 6px 10px;
+            font-family: var(--font-mono);
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            font-weight: 700;
             border-radius: var(--radius-sm);
             cursor: pointer;
             transition: var(--transition);
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 6px;
+            gap: 4px;
         }
 
         .btn-trimmer-play {
-            background: rgba(60, 208, 162, 0.1);
-            border: 1px solid var(--accent-mint);
-            color: var(--accent-mint);
+            background: rgba(255, 114, 53, 0.05);
+            border: 1px solid var(--accent-copper);
+            color: var(--accent-copper);
         }
 
         .btn-trimmer-play:hover {
-            background: var(--accent-mint);
-            color: #000;
-            box-shadow: 0 0 10px var(--accent-mint-glow);
+            background: var(--accent-copper);
+            color: #07090e;
+            box-shadow: 0 0 8px var(--accent-copper-glow);
         }
 
         .btn-trimmer-play.playing {
             background: #ef4444;
             border-color: #ef4444;
-            color: #fff;
-            box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
+            color: #ffffff;
+            box-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
         }
 
         .btn-trimmer-reset {
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: #19202f;
+            border: 1px solid var(--panel-border);
             color: var(--text-secondary);
         }
 
         .btn-trimmer-reset:hover {
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.03);
             color: var(--text-primary);
         }
-    </style>
+</style>
 </head>
 <body>
 
@@ -1846,7 +1865,7 @@
                 const isSelected = currentPercent >= startPercent && currentPercent <= endPercent;
 
                 if (isSelected) {
-                    ctx.fillStyle = "#3cd0a2"; // var(--accent-mint)
+                    ctx.fillStyle = "#ff7235"; // var(--accent-copper)
                 } else {
                     ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
                 }