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, 117 insertions, 0 deletions

diff --git a/tools/common/style.css b/tools/common/style.css
new file mode 100644
index 0000000..1ba4bad
--- /dev/null
+++ b/tools/common/style.css
@@ -0,0 +1,117 @@
+:root {
+    --bg-dark: #1e1e1e;
+    --bg-medium: #252526;
+    --bg-light: #3c3c3c;
+    --text-primary: #d4d4d4;
+    --text-muted: #858585;
+    --accent-blue: #0e639c;
+    --accent-blue-hover: #1177bb;
+    --accent-green: #4ec9b0;
+    --accent-orange: #ce9178;
+    --accent-red: #f48771;
+    --border-color: #858585;
+    --gap: 10px;
+    --radius: 4px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: var(--bg-dark);
+    color: var(--text-primary);
+    overflow: hidden;
+}
+
+button, .btn, .file-label {
+    background: var(--accent-blue);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 14px;
+    display: inline-block;
+    text-align: center;
+}
+
+button:hover, .btn:hover, .file-label:hover {
+    background: var(--accent-blue-hover);
+}
+
+button:disabled, .btn:disabled {
+    background: var(--bg-light);
+    cursor: not-allowed;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+input, select {
+    background: var(--bg-light);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    color: var(--text-primary);
+    padding: 8px;
+    font-size: 14px;
+}
+
+.container {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    background: var(--bg-medium);
+    padding: 15px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+h1 {
+    color: var(--accent-green);
+    font-size: 18px;
+    white-space: nowrap;
+}
+
+.controls {
+    display: flex;
+    gap: var(--gap);
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.panel {
+    background: var(--bg-medium);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 15px;
+}
+
+.error-message {
+    background: #5a1d1d;
+    color: var(--accent-red);
+    padding: 10px;
+    border-radius: var(--radius);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    margin: 10px 0;
+}
+
+.success-message {
+    background: #1e5231;
+    color: #89d185;
+    padding: 10px;
+    border-radius: var(--radius);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    margin: 10px 0;
+}