refactor(tools): consolidate common CSS for HTML tools

Extract common styles from various tool HTML files (timeline, spectral, cnn_v2_test, etc.) into a shared stylesheet.

This reduces code duplication and improves maintainability of the tool frontends.

- Create a new 'tools/common/style.css' to house the shared rules.
- Update all tool HTML files to link to the new stylesheet.
- Remove redundant inline styles from individual HTML files.

1 files changed, 2 insertions, 37 deletions

diff --git a/tools/cnn_v2_test/index.html b/tools/cnn_v2_test/index.html
index e226d0c..84702d5 100644
--- a/tools/cnn_v2_test/index.html
+++ b/tools/cnn_v2_test/index.html
@@ -32,32 +32,21 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CNN v2 Testing Tool</title>
+  <link rel="stylesheet" href="../common/style.css">
   <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
-      font-family: 'Courier New', monospace;
-      background: #1a1a1a;
-      color: #e0e0e0;
       display: flex;
       flex-direction: column;
       height: 100vh;
-      overflow: hidden;
     }
     .header {
-      background: #2a2a2a;
       padding: 16px;
       border-bottom: 1px solid #404040;
-      display: flex;
-      align-items: center;
       gap: 24px;
-      flex-wrap: wrap;
     }
     h1 { font-size: 18px; }
     .controls {
-      display: flex;
       gap: 16px;
-      align-items: center;
-      flex-wrap: wrap;
     }
     .control-group {
       display: flex;
@@ -66,7 +55,7 @@
     }
     .control-group label { font-size: 12px; }
     input[type="range"] { width: 120px; }
-    input[type="number"] { width: 60px; background: #1a1a1a; color: #e0e0e0; border: 1px solid #404040; padding: 4px; }
+    input[type="number"] { width: 60px; padding: 4px; }
     .drop-zone {
       border: 3px dashed #606060;
       padding: 20px;
@@ -80,18 +69,10 @@
       color: #4a9eff;
     }
     button {
-      background: #1a1a1a;
-      border: 1px solid #404040;
-      color: #e0e0e0;
       padding: 6px 12px;
       font-size: 12px;
-      font-family: 'Courier New', monospace;
-      cursor: pointer;
-      transition: all 0.2s;
-      border-radius: 4px;
     }
     button:hover { border-color: #606060; background: #252525; }
-    button:disabled { opacity: 0.3; cursor: not-allowed; }
     video { display: none; }
     .drop-zone:hover { border-color: #4a9eff; background: #2a3545; }
     .drop-zone.active { border-color: #4a9eff; background: #1a2a3a; }
@@ -120,7 +101,6 @@
       padding: 24px;
       overflow: auto;
       position: relative;
-      background: #1a1a1a;
     }
     .video-controls-float {
       position: absolute;
@@ -185,7 +165,6 @@
       padding: 16px;
     }
     .panel {
-      border: 1px solid #404040;
       border-radius: 4px;
       overflow: hidden;
     }
@@ -228,28 +207,14 @@
       margin-bottom: 12px;
     }
     .layer-buttons button {
-      background: #1a1a1a;
-      border: 1px solid #404040;
-      color: #e0e0e0;
       padding: 6px 12px;
       font-size: 10px;
-      font-family: 'Courier New', monospace;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    .layer-buttons button:hover {
-      border-color: #606060;
-      background: #252525;
     }
     .layer-buttons button.active {
       background: #4a9eff;
       border-color: #4a9eff;
       color: #1a1a1a;
     }
-    .layer-buttons button:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
     .layer-buttons button:disabled:hover {
       border-color: #404040;
       background: #1a1a1a;