From 27b04ed9d8f68f0a97b8bed669d0c4f41b806bd7 Mon Sep 17 00:00:00 2001
From: Sergey Krashevich <svk@svk.su>
Date: Wed, 11 Mar 2026 02:12:52 +0300
Subject: [PATCH] style(links, add, index, info, probe, log, main, styles):
 update styles and improve layout  - refactor button and input styles for
 consistency across pages  - enhance responsive design for better usability on
 mobile devices  - adjust spacing and margins for a cleaner look  - unify
 color scheme and hover effects for links and buttons  - remove unused font
 imports to optimize loading performance

---
 www/add.html   |  32 +++--
 www/index.html | 234 +++++----------------------------
 www/info.html  | 218 +++++++------------------------
 www/links.html | 182 +++++++-------------------
 www/log.html   |  28 ++--
 www/main.js    |  18 +--
 www/probe.html | 220 +++++++------------------------
 www/styles.css | 343 ++++++++++++++++++-------------------------------
 8 files changed, 343 insertions(+), 932 deletions(-)

diff --git a/www/add.html b/www/add.html
index ec81ed17..9d9c3ead 100644
--- a/www/add.html
+++ b/www/add.html
@@ -6,20 +6,34 @@
     <title>add - go2rtc</title>
     <style>
         main > button {
-            background-color: var(--bg-secondary);
-            color: var(--text-secondary);
+            background: var(--bg-card);
+            color: var(--text-primary);
             cursor: pointer;
-            padding: 14px;
+            padding: 12px 16px;
             width: 100%;
-            border: none;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
             text-align: left;
-            font-size: 16px;
-            font-weight: bold;
+            font-size: 14px;
+            font-weight: 500;
+            font-family: inherit;
+            margin-bottom: 4px;
+            transition: border-color 0.15s;
+        }
+
+        main > button:hover {
+            border-color: var(--accent);
+            color: var(--accent);
         }
 
         main > div {
             display: none;
-            gap: 10px;
+            gap: 8px;
+            margin-bottom: 8px;
+            padding: 12px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
         }
     </style>
 </head>
@@ -67,7 +81,7 @@
 </script>
 
 <main>
-    <div id="readonly-banner" style="display: none; padding: 10px; background: #ffe9e9; border: 1px solid #f0b4b4;">
+    <div id="readonly-banner" style="display: none; padding: 10px; background: var(--bg-card); border: 1px solid var(--red); border-radius: 6px; color: var(--red); margin-bottom: 12px;">
         Read-only mode: add actions are disabled.
     </div>
     <button id="stream">Temporary stream</button>
@@ -455,7 +469,7 @@
 
     <button id="wyze">Wyze</button>
     <div>
-        <p style="margin: 5px 0; font-size: 12px; color: #888;">
+        <p style="margin: 5px 0; font-size: 12px; color: var(--text-muted);">
             API Key required: <a href="https://support.wyze.com/hc/en-us/articles/16129834216731" target="_blank">Get your API Key</a>
         </p>
         <form id="wyze-login-form">
diff --git a/www/index.html b/www/index.html
index 58f56e15..a0c209df 100644
--- a/www/index.html
+++ b/www/index.html
@@ -4,240 +4,90 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>go2rtc</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
     <style>
-        /* Page-specific styles for index.html */
         .controls {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 24px;
-            margin-bottom: 32px;
             display: flex;
             flex-wrap: wrap;
-            gap: 20px;
+            gap: 12px;
             align-items: center;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            margin-bottom: 16px;
         }
 
         .btn-primary {
-            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-electric));
-            color: var(--bg-primary);
+            background: var(--accent);
+            color: #fff;
             border: none;
-            padding: 12px 28px;
+            padding: 8px 20px;
             border-radius: 6px;
-            font-family: 'JetBrains Mono', monospace;
-            font-weight: 700;
+            font-weight: 600;
             font-size: 13px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
             cursor: pointer;
-            position: relative;
-            overflow: hidden;
-            box-shadow: var(--glow-cyan);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .btn-primary::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.3);
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
-        }
-
-        .btn-primary:hover::before {
-            width: 300px;
-            height: 300px;
+            transition: background 0.15s;
         }
 
         .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
-        }
-
-        .btn-primary:active {
-            transform: translateY(0);
+            background: var(--accent-hover);
+            color: #fff;
         }
 
         .mode-selector {
             display: flex;
-            gap: 16px;
+            gap: 12px;
             align-items: center;
-            padding: 12px 20px;
-            background: var(--bg-secondary);
-            border-radius: 6px;
-            border: 1px solid var(--border-color);
         }
 
         .mode-label {
             color: var(--text-muted);
-            text-transform: uppercase;
-            font-size: 11px;
-            letter-spacing: 1px;
-            font-weight: 700;
-        }
-
-        .checkbox-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-            user-select: none;
-        }
-
-        .checkbox-wrapper input[type="checkbox"] {
-            appearance: none;
-            width: 18px;
-            height: 18px;
-            border: 2px solid var(--border-color);
-            border-radius: 3px;
-            cursor: pointer;
-            position: relative;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .checkbox-wrapper input[type="checkbox"]:checked {
-            background: var(--accent-cyan);
-            border-color: var(--accent-cyan);
-            box-shadow: var(--glow-cyan);
-        }
-
-        .checkbox-wrapper input[type="checkbox"]:checked::after {
-            content: '✓';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            color: var(--bg-primary);
             font-size: 12px;
-            font-weight: 700;
         }
 
-        .checkbox-wrapper label {
-            color: var(--text-secondary);
-            font-size: 12px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            cursor: pointer;
-        }
-
-        /* Table */
         .streams-table {
-            background: var(--bg-card);
             border: 1px solid var(--border-color);
             border-radius: 8px;
             overflow: hidden;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
         }
 
         table {
-            width: 100%;
-            border-collapse: collapse;
+            border: none;
         }
 
         thead {
-            background: var(--bg-secondary);
-            border-bottom: 2px solid var(--accent-cyan);
-        }
-
-        th {
-            text-align: left;
-            padding: 16px 20px;
-            font-weight: 700;
-            text-transform: uppercase;
-            font-size: 11px;
-            letter-spacing: 1px;
-            color: var(--accent-cyan);
+            border-bottom: 1px solid var(--border-color);
         }
 
         th label {
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 8px;
             cursor: pointer;
         }
 
-        td {
-            padding: 16px 20px;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        tbody tr {
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        tbody td:first-child {
-            position: relative;
-        }
-
-        tbody td:first-child::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 3px;
-            height: 100%;
-            background: var(--accent-cyan);
-            transform: scaleY(0);
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        tbody tr:hover {
-            background: rgba(0, 217, 255, 0.05);
-        }
-
-        tbody tr:hover td:first-child::before {
-            transform: scaleY(1);
-        }
-
-        tbody tr:last-child td {
-            border-bottom: none;
-        }
-
-        /* Stream name with checkbox */
         .stream-name {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 8px;
         }
 
         .stream-name label {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 8px;
             cursor: pointer;
             font-weight: 500;
         }
 
-        /* Live indicator */
         .online-count {
             display: inline-flex;
             align-items: center;
-            gap: 8px;
-            font-weight: 700;
+            gap: 6px;
         }
 
         .live-dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: var(--accent-green);
-            box-shadow: var(--glow-green);
-            animation: pulse 2s infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.6; transform: scale(1.2); }
+            background: var(--green);
         }
 
         .offline-dot {
@@ -248,38 +98,25 @@
         }
 
         .delete-link {
-            color: var(--accent-red);
+            color: var(--red);
         }
 
         .delete-link:hover {
-            color: #ff6b81;
+            color: var(--red);
         }
 
-        /* Info footer */
         .info {
-            margin-top: 32px;
-            padding: 20px 24px;
+            margin-top: 16px;
+            padding: 14px 16px;
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             border-radius: 8px;
             color: var(--text-muted);
             font-size: 12px;
             white-space: pre;
-            font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
         }
 
-        .info-item {
-            display: flex;
-            gap: 8px;
-        }
-
-        .info-label {
-            color: var(--accent-cyan);
-            text-transform: uppercase;
-            font-weight: 700;
-        }
-
-        /* Responsive - page specific */
         @media (max-width: 768px) {
             .controls {
                 flex-direction: column;
@@ -287,8 +124,7 @@
             }
 
             .mode-selector {
-                flex-direction: column;
-                align-items: stretch;
+                flex-wrap: wrap;
             }
 
             table, thead, tbody, th, td, tr {
@@ -300,7 +136,7 @@
             }
 
             tr {
-                margin-bottom: 16px;
+                margin-bottom: 12px;
                 border: 1px solid var(--border-color);
                 border-radius: 8px;
                 overflow: hidden;
@@ -320,15 +156,13 @@
             td::before {
                 content: attr(data-label);
                 position: absolute;
-                left: 16px;
-                top: 16px;
-                color: var(--accent-cyan);
-                font-weight: 700;
-                text-transform: uppercase;
-                font-size: 11px;
+                left: 14px;
+                top: 10px;
+                color: var(--text-secondary);
+                font-weight: 600;
+                font-size: 12px;
             }
         }
-
     </style>
 </head>
 <body>
@@ -336,7 +170,7 @@
 <header>
     <div class="container">
         <nav>
-            <span class="logo">GO2RTC</span>
+            <span class="logo">go2rtc</span>
             <div class="nav-links">
                 <a href="index.html" class="nav-link active">Streams</a>
                 <a href="add.html" class="nav-link">Add Stream</a>
@@ -358,19 +192,19 @@
             <button class="btn-primary">View Streams</button>
             <div class="mode-selector">
                 <span class="mode-label">Modes:</span>
-                <label class="checkbox-wrapper">
+                <label>
                     <input type="checkbox" name="webrtc" checked>
                     <span>WebRTC</span>
                 </label>
-                <label class="checkbox-wrapper">
+                <label>
                     <input type="checkbox" name="mse" checked>
                     <span>MSE</span>
                 </label>
-                <label class="checkbox-wrapper">
+                <label>
                     <input type="checkbox" name="hls" checked>
                     <span>HLS</span>
                 </label>
-                <label class="checkbox-wrapper">
+                <label>
                     <input type="checkbox" name="mjpeg" checked>
                     <span>MJPEG</span>
                 </label>
diff --git a/www/info.html b/www/info.html
index 804ca165..5ea70c29 100644
--- a/www/info.html
+++ b/www/info.html
@@ -4,115 +4,78 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Stream Info - go2rtc</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="styles.css">
     <style>
-        /* Page-specific styles for info.html */
-
         .page-header {
-            margin-bottom: 32px;
+            margin-bottom: 20px;
         }
 
         .page-title {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 32px;
-            color: var(--accent-cyan);
-            text-shadow: var(--glow-cyan);
-            margin-bottom: 8px;
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 4px;
         }
 
         .page-subtitle {
             color: var(--text-secondary);
-            font-size: 14px;
+            font-size: 13px;
         }
 
         .stream-name-display {
-            color: var(--accent-electric);
-            font-weight: 700;
+            color: var(--accent);
+            font-weight: 600;
         }
 
         .info-card {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
             border-radius: 8px;
-            padding: 24px;
-            margin-bottom: 24px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            padding: 16px;
+            margin-bottom: 16px;
         }
 
         .card-title {
-            font-size: 16px;
-            font-weight: 700;
-            color: var(--accent-cyan);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 16px;
-            padding-bottom: 12px;
-            border-bottom: 2px solid var(--border-color);
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            margin-bottom: 12px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid var(--border-color);
         }
 
         .json-viewer {
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             border-radius: 6px;
-            padding: 20px;
+            padding: 14px;
             overflow-x: auto;
             font-size: 13px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
         }
 
-        .json-key {
-            color: var(--accent-cyan);
-            font-weight: 700;
-        }
-
-        .json-string {
-            color: var(--accent-green);
-        }
-
-        .json-number {
-            color: var(--accent-yellow);
-        }
-
-        .json-boolean {
-            color: var(--accent-electric);
-            font-weight: 700;
-        }
-
-        .json-null {
-            color: var(--text-muted);
-            font-style: italic;
-        }
-
-        .json-bracket {
-            color: var(--text-secondary);
-        }
-
-        .json-line {
-            margin: 4px 0;
-        }
-
-        .json-indent {
-            display: inline-block;
-            width: 20px;
-        }
+        .json-key { color: var(--accent); }
+        .json-string { color: var(--green); }
+        .json-number { color: var(--yellow); }
+        .json-boolean { color: var(--accent-hover); font-weight: 600; }
+        .json-null { color: var(--text-muted); font-style: italic; }
+        .json-bracket { color: var(--text-secondary); }
+        .json-line { margin: 2px 0; }
+        .json-indent { display: inline-block; width: 18px; }
 
         .loading {
             text-align: center;
-            padding: 60px 20px;
+            padding: 40px 20px;
             color: var(--text-secondary);
         }
 
         .loading-spinner {
             display: inline-block;
-            width: 40px;
-            height: 40px;
-            border: 3px solid var(--border-color);
-            border-top-color: var(--accent-cyan);
+            width: 28px;
+            height: 28px;
+            border: 2px solid var(--border-color);
+            border-top-color: var(--accent);
             border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-bottom: 16px;
+            animation: spin 0.8s linear infinite;
+            margin-bottom: 12px;
         }
 
         @keyframes spin {
@@ -120,47 +83,24 @@
         }
 
         .error {
-            background: rgba(255, 71, 87, 0.1);
-            border: 1px solid var(--accent-red);
+            background: var(--bg-card);
+            border: 1px solid var(--red);
             border-radius: 8px;
-            padding: 24px;
-            color: var(--accent-red);
+            padding: 20px;
+            color: var(--red);
             text-align: center;
         }
 
         .error-title {
-            font-size: 18px;
-            font-weight: 700;
-            margin-bottom: 8px;
-        }
-
-        @media (max-width: 768px) {
-            .page-title {
-                font-size: 24px;
-            }
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 4px;
         }
     </style>
 </head>
 <body>
 
-<header>
-    <div class="container">
-        <nav>
-            <a href="index.html" class="logo">GO2RTC</a>
-            <div class="nav-links">
-                <a href="index.html" class="nav-link">Streams</a>
-                <a href="add.html" class="nav-link">Add Stream</a>
-                <a href="config.html" class="nav-link">Config</a>
-                <a href="log.html" class="nav-link">Logs</a>
-                <a href="net.html" class="nav-link">Network</a>
-            </div>
-            <a href="https://github.com/AlexxIT/go2rtc" target="_blank" class="nav-link docs-link">docs</a>
-            <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
-                <span class="theme-icon">🌙</span>
-            </button>
-        </nav>
-    </div>
-</header>
+<script src="main.js"></script>
 
 <main>
     <div class="container">
@@ -168,7 +108,7 @@
 
         <div class="page-header">
             <h1 class="page-title">Stream Information</h1>
-            <p class="page-subtitle">Detailed information for stream: <span class="stream-name-display" id="stream-name"></span></p>
+            <p class="page-subtitle">Details for: <span class="stream-name-display" id="stream-name"></span></p>
         </div>
 
         <div id="content">
@@ -181,47 +121,6 @@
 </main>
 
 <script>
-    // Theme management
-    function initTheme() {
-        const savedTheme = localStorage.getItem('theme');
-        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
-
-        setTheme(theme);
-
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-            if (!localStorage.getItem('theme')) {
-                setTheme(e.matches ? 'dark' : 'light');
-            }
-        });
-    }
-
-    function setTheme(theme) {
-        const html = document.documentElement;
-        const themeIcon = document.querySelector('.theme-icon');
-
-        if (theme === 'light') {
-            html.setAttribute('data-theme', 'light');
-            if (themeIcon) themeIcon.textContent = '☀️';
-        } else {
-            html.removeAttribute('data-theme');
-            if (themeIcon) themeIcon.textContent = '🌙';
-        }
-    }
-
-    function toggleTheme() {
-        const html = document.documentElement;
-        const currentTheme = html.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
-        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-
-        setTheme(newTheme);
-        localStorage.setItem('theme', newTheme);
-    }
-
-    initTheme();
-    document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
-
-    // Get stream name from URL
     const urlParams = new URLSearchParams(window.location.search);
     const streamName = urlParams.get('src');
 
@@ -235,7 +134,6 @@
     } else {
         document.getElementById('stream-name').textContent = decodeURIComponent(streamName);
 
-        // Fetch stream info
         const url = new URL('api/streams', location.href);
         url.searchParams.set('src', streamName);
 
@@ -259,14 +157,11 @@
 
     function displayInfo(data) {
         const content = document.getElementById('content');
-
         let html = '<div class="info-card">';
         html += '<div class="card-title">Stream Data</div>';
         html += '<div class="json-viewer">';
         html += formatJSON(data, 0);
-        html += '</div>';
-        html += '</div>';
-
+        html += '</div></div>';
         content.innerHTML = html;
     }
 
@@ -274,27 +169,13 @@
         const indentStr = '<span class="json-indent"></span>'.repeat(indent);
         let html = '';
 
-        if (obj === null) {
-            return `<span class="json-null">null</span>`;
-        }
-
-        if (typeof obj === 'string') {
-            return `<span class="json-string">"${escapeHtml(obj)}"</span>`;
-        }
-
-        if (typeof obj === 'number') {
-            return `<span class="json-number">${obj}</span>`;
-        }
-
-        if (typeof obj === 'boolean') {
-            return `<span class="json-boolean">${obj}</span>`;
-        }
+        if (obj === null) return `<span class="json-null">null</span>`;
+        if (typeof obj === 'string') return `<span class="json-string">"${escapeHtml(obj)}"</span>`;
+        if (typeof obj === 'number') return `<span class="json-number">${obj}</span>`;
+        if (typeof obj === 'boolean') return `<span class="json-boolean">${obj}</span>`;
 
         if (Array.isArray(obj)) {
-            if (obj.length === 0) {
-                return '<span class="json-bracket">[]</span>';
-            }
-
+            if (obj.length === 0) return '<span class="json-bracket">[]</span>';
             html += '<span class="json-bracket">[</span>\n';
             obj.forEach((item, i) => {
                 html += '<div class="json-line">' + indentStr + '<span class="json-indent"></span>';
@@ -308,10 +189,7 @@
 
         if (typeof obj === 'object') {
             const keys = Object.keys(obj);
-            if (keys.length === 0) {
-                return '<span class="json-bracket">{}</span>';
-            }
-
+            if (keys.length === 0) return '<span class="json-bracket">{}</span>';
             html += '<span class="json-bracket">{</span>\n';
             keys.forEach((key, i) => {
                 html += '<div class="json-line">' + indentStr + '<span class="json-indent"></span>';
diff --git a/www/links.html b/www/links.html
index 2fa76b88..8d774645 100644
--- a/www/links.html
+++ b/www/links.html
@@ -4,109 +4,66 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Links - go2rtc</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="styles.css">
     <style>
-        /* Page-specific styles for links.html */
-        .container {
-            max-width: 1200px;
-        }
-
         .page-header {
-            margin-bottom: 32px;
+            margin-bottom: 20px;
         }
 
         .page-title {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 32px;
-            color: var(--accent-cyan);
-            text-shadow: var(--glow-cyan);
-            margin-bottom: 8px;
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 4px;
         }
 
         .stream-name {
             color: var(--text-secondary);
-            font-size: 14px;
-            font-family: monospace;
+            font-size: 13px;
             word-break: break-all;
-            overflow-wrap: break-word;
         }
 
         .section {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
             border-radius: 8px;
-            padding: 24px;
-            margin-bottom: 24px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            padding: 16px;
+            margin-bottom: 16px;
         }
 
         .section-title {
-            font-size: 18px;
-            font-weight: 700;
-            color: var(--accent-cyan);
-            margin-bottom: 16px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
+            font-size: 15px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 12px;
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 6px;
         }
 
         .link-list {
             list-style: none;
             display: flex;
             flex-direction: column;
-            gap: 12px;
+            gap: 8px;
         }
 
         .link-item {
             display: flex;
             align-items: flex-start;
-            padding: 12px;
+            padding: 10px;
             background: var(--bg-secondary);
             border-radius: 6px;
             border: 1px solid var(--border-color);
-            transition: all 0.3s;
             flex-wrap: wrap;
             word-break: break-word;
-            overflow-wrap: break-word;
-        }
-
-        .link-item:hover {
-            border-color: var(--accent-cyan);
-            box-shadow: var(--glow-cyan);
-        }
-
-        .link-item::before {
-            content: '▸';
-            color: var(--accent-cyan);
-            margin-right: 12px;
-            font-size: 14px;
+            gap: 8px;
         }
 
         .link-item a {
-            color: var(--accent-cyan);
-            text-decoration: none;
             font-weight: 500;
-            margin-right: 8px;
             word-break: break-all;
-            overflow-wrap: break-word;
             max-width: 100%;
         }
 
-        .link-item a:hover {
-            color: var(--accent-electric);
-            text-decoration: underline;
-        }
-
-        .link-item a::after,
-        .action-link::after {
-            content: none;
-        }
-
         .link-description {
             color: var(--text-secondary);
             font-size: 13px;
@@ -116,12 +73,12 @@
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             border-radius: 6px;
-            padding: 16px;
-            font-family: 'Courier New', monospace;
+            padding: 12px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
             font-size: 13px;
-            color: var(--accent-green);
+            color: var(--text-primary);
             overflow-x: auto;
-            margin-top: 12px;
+            margin-top: 10px;
             word-break: break-all;
             white-space: pre-wrap;
         }
@@ -129,122 +86,87 @@
         .form-group {
             display: flex;
             flex-direction: column;
-            gap: 12px;
-            margin-top: 16px;
+            gap: 10px;
+            margin-top: 12px;
         }
 
         .radio-group {
             display: flex;
             flex-direction: column;
-            gap: 8px;
+            gap: 6px;
         }
 
         .radio-label {
             display: flex;
             align-items: center;
             gap: 8px;
-            padding: 10px;
+            padding: 8px 10px;
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             border-radius: 6px;
             cursor: pointer;
-            transition: all 0.3s;
+            transition: border-color 0.15s;
+            font-size: 13px;
         }
 
         .radio-label:hover {
-            border-color: var(--accent-cyan);
+            border-color: var(--accent);
         }
 
         .radio-label input[type="radio"] {
-            accent-color: var(--accent-cyan);
+            accent-color: var(--accent);
         }
 
         .input-group {
             display: flex;
-            gap: 12px;
+            gap: 8px;
             align-items: center;
         }
 
-        input[type="text"] {
+        .input-group input[type="text"] {
             flex: 1;
-            padding: 12px 16px;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 6px;
-            color: var(--text-primary);
-            font-size: 14px;
-            transition: all 0.3s;
-        }
-
-        input[type="text"]:focus {
-            outline: none;
-            border-color: var(--accent-cyan);
-            box-shadow: var(--glow-cyan);
-        }
-
-        button {
-            padding: 12px 24px;
-            background: var(--accent-cyan);
-            color: #0a0e1a;
-            border: none;
-            border-radius: 6px;
-            font-weight: 700;
-            text-transform: uppercase;
-            font-size: 12px;
-            letter-spacing: 1px;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        button:hover {
-            background: var(--accent-electric);
-            box-shadow: var(--glow-cyan);
-            transform: translateY(-2px);
         }
 
         .action-links {
             display: flex;
-            gap: 12px;
-            margin-top: 12px;
+            gap: 8px;
+            margin-top: 8px;
         }
 
         .action-link {
-            padding: 8px 16px;
+            padding: 6px 12px;
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             border-radius: 6px;
-            color: var(--accent-cyan);
-            text-decoration: none;
             font-size: 13px;
-            transition: all 0.3s;
+            transition: border-color 0.15s;
         }
 
         .action-link:hover {
-            border-color: var(--accent-cyan);
-            box-shadow: var(--glow-cyan);
+            border-color: var(--accent);
+            text-decoration: none;
         }
 
         .action-link.delete {
-            color: var(--accent-red);
+            color: var(--red);
         }
 
         .action-link.delete:hover {
-            border-color: var(--accent-red);
+            border-color: var(--red);
         }
 
         #homekit-qrcode {
-            margin-top: 16px;
-            padding: 16px;
+            margin-top: 12px;
+            padding: 12px;
             background: white;
             display: inline-block;
-            border-radius: 8px;
+            border-radius: 6px;
         }
 
         .note {
             color: var(--text-muted);
-            font-size: 13px;
+            font-size: 12px;
             font-style: italic;
-            margin-top: 8px;
         }
 
         @media (max-width: 768px) {
@@ -252,10 +174,6 @@
                 flex-direction: column;
             }
 
-            button {
-                width: 100%;
-            }
-
             .action-links {
                 flex-direction: column;
             }
@@ -269,7 +187,7 @@
 <main>
     <div class="container">
         <a href="index.html" class="back-link">← Back to Streams</a>
-        
+
         <div class="page-header">
             <h1 class="page-title">Stream Links</h1>
             <div class="stream-name">Stream: <span id="stream-name"></span></div>
@@ -278,11 +196,11 @@
         <div id="links"></div>
 
         <div id="homekit" class="section" style="display: none">
-            <h2 class="section-title">🏠 HomeKit Server</h2>
+            <h2 class="section-title">HomeKit Server</h2>
         </div>
 
         <div class="section">
-            <h2 class="section-title">🎵 Play Audio</h2>
+            <h2 class="section-title">Play Audio</h2>
             <div class="form-group">
                 <div class="radio-group">
                     <label class="radio-label">
@@ -307,7 +225,7 @@
         </div>
 
         <div class="section">
-            <h2 class="section-title">📡 Publish Stream</h2>
+            <h2 class="section-title">Publish Stream</h2>
             <div class="code-block">YouTube:  rtmps://xxx.rtmp.youtube.com/live2/xxxx-xxxx-xxxx-xxxx-xxxx
 Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx</div>
             <div class="form-group">
@@ -320,7 +238,7 @@ Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx</div>
         </div>
 
         <div id="webrtc" class="section">
-            <h2 class="section-title">🎥 WebRTC Magic</h2>
+            <h2 class="section-title">WebRTC</h2>
             <div class="form-group">
                 <div class="radio-group">
                     <label class="radio-label">
@@ -367,7 +285,7 @@ Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx</div>
 
     links.innerHTML = `
     <div class="section">
-        <h2 class="section-title">🌐 Any Codec in Source</h2>
+        <h2 class="section-title">Any Codec in Source</h2>
         <ul class="link-list">
             <li class="link-item">
                 <a href="stream.html?src=${src}">stream.html</a>
@@ -393,7 +311,7 @@ Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx</div>
 
         links.innerHTML += `
         <div class="section">
-            <h2 class="section-title">📹 RTSP Streaming</h2>
+            <h2 class="section-title">RTSP Streaming</h2>
             <ul class="link-list">
                 <li class="link-item">
                     <a href="rtsp://${rtsp}/${src}">rtsp://${rtsp}/${src}</a>
@@ -412,7 +330,7 @@ Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx</div>
         </div>
 
         <div class="section">
-            <h2 class="section-title">🎬 H264/H265 Source</h2>
+            <h2 class="section-title">H264/H265 Source</h2>
             <ul class="link-list">
                 <li class="link-item">
                     <a href="stream.html?src=${src}&mode=webrtc">WebRTC stream</a>
@@ -454,7 +372,7 @@ Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx</div>
         </div>
 
         <div class="section">
-            <h2 class="section-title">📸 MJPEG Source</h2>
+            <h2 class="section-title">MJPEG Source</h2>
             <ul class="link-list">
                 <li class="link-item">
                     <a href="stream.html?src=${src}&mode=mjpeg">stream.html (MJPEG)</a>
diff --git a/www/log.html b/www/log.html
index 5809c45f..818f9b42 100644
--- a/www/log.html
+++ b/www/log.html
@@ -8,32 +8,20 @@
         main > div {
             display: flex;
             flex-wrap: wrap;
-            gap: 10px;
+            gap: 8px;
+            margin-bottom: 12px;
         }
 
         table tbody {
             font-size: 13px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
         }
 
-        .trace {
-            color: #585858 !important;
-        }
-
-        .debug {
-            color: #808080 !important;
-        }
-
-        .info {
-            color: #0174DF !important;
-        }
-
-        .warn {
-            color: #FF9966 !important;
-        }
-
-        .error {
-            color: #DF0101 !important;
-        }
+        .trace { color: var(--text-muted) !important; }
+        .debug { color: var(--text-secondary) !important; }
+        .info { color: var(--accent) !important; }
+        .warn { color: var(--yellow) !important; }
+        .error { color: var(--red) !important; }
     </style>
 </head>
 <body>
diff --git a/www/main.js b/www/main.js
index ca503ad8..694bc70b 100644
--- a/www/main.js
+++ b/www/main.js
@@ -1,16 +1,6 @@
 // Shared navigation component - loaded automatically by other pages
 if (!document.querySelector('.logo')) {
     const head = document.head;
-    if (!head.querySelector('link[href*="fonts.googleapis.com"]')) {
-        head.insertAdjacentHTML(
-            'beforeend',
-            `
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
-`.trim(),
-        );
-    }
 
     if (!head.querySelector('link[href="styles.css"]')) {
         head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="styles.css">');
@@ -23,7 +13,7 @@ if (!document.querySelector('.logo')) {
 <header>
     <div class="container">
         <nav>
-            <span class="logo">GO2RTC</span>
+            <span class="logo">go2rtc</span>
             <div class="nav-links">
                 <a href="index.html" class="nav-link">Streams</a>
                 <a href="add.html" class="nav-link">Add Stream</a>
@@ -33,7 +23,7 @@ if (!document.querySelector('.logo')) {
             </div>
             <a href="https://github.com/AlexxIT/go2rtc" target="_blank" class="nav-link docs-link">docs</a>
             <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
-                <span class="theme-icon">🌙</span>
+                <span class="theme-icon">\u{1F319}</span>
             </button>
         </nav>
     </div>
@@ -70,10 +60,10 @@ if (!document.querySelector('.logo')) {
 
         if (theme === 'light') {
             html.setAttribute('data-theme', 'light');
-            if (themeIcon) themeIcon.textContent = '☀️';
+            if (themeIcon) themeIcon.textContent = '\u2600\uFE0F';
         } else {
             html.removeAttribute('data-theme');
-            if (themeIcon) themeIcon.textContent = '🌙';
+            if (themeIcon) themeIcon.textContent = '\u{1F319}';
         }
     }
 
diff --git a/www/probe.html b/www/probe.html
index e69d0fd8..e193774b 100644
--- a/www/probe.html
+++ b/www/probe.html
@@ -4,115 +4,78 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Stream Probe - go2rtc</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="styles.css">
     <style>
-        /* Page-specific styles for probe.html */
-
         .page-header {
-            margin-bottom: 32px;
+            margin-bottom: 20px;
         }
 
         .page-title {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 32px;
-            color: var(--accent-cyan);
-            text-shadow: var(--glow-cyan);
-            margin-bottom: 8px;
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 4px;
         }
 
         .page-subtitle {
             color: var(--text-secondary);
-            font-size: 14px;
+            font-size: 13px;
         }
 
         .stream-name-display {
-            color: var(--accent-electric);
-            font-weight: 700;
+            color: var(--accent);
+            font-weight: 600;
         }
 
         .info-card {
             background: var(--bg-card);
             border: 1px solid var(--border-color);
             border-radius: 8px;
-            padding: 24px;
-            margin-bottom: 24px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            padding: 16px;
+            margin-bottom: 16px;
         }
 
         .card-title {
-            font-size: 16px;
-            font-weight: 700;
-            color: var(--accent-cyan);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 16px;
-            padding-bottom: 12px;
-            border-bottom: 2px solid var(--border-color);
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            margin-bottom: 12px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid var(--border-color);
         }
 
         .json-viewer {
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
             border-radius: 6px;
-            padding: 20px;
+            padding: 14px;
             overflow-x: auto;
             font-size: 13px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
         }
 
-        .json-key {
-            color: var(--accent-cyan);
-            font-weight: 700;
-        }
-
-        .json-string {
-            color: var(--accent-green);
-        }
-
-        .json-number {
-            color: var(--accent-yellow);
-        }
-
-        .json-boolean {
-            color: var(--accent-electric);
-            font-weight: 700;
-        }
-
-        .json-null {
-            color: var(--text-muted);
-            font-style: italic;
-        }
-
-        .json-bracket {
-            color: var(--text-secondary);
-        }
-
-        .json-line {
-            margin: 4px 0;
-        }
-
-        .json-indent {
-            display: inline-block;
-            width: 20px;
-        }
+        .json-key { color: var(--accent); }
+        .json-string { color: var(--green); }
+        .json-number { color: var(--yellow); }
+        .json-boolean { color: var(--accent-hover); font-weight: 600; }
+        .json-null { color: var(--text-muted); font-style: italic; }
+        .json-bracket { color: var(--text-secondary); }
+        .json-line { margin: 2px 0; }
+        .json-indent { display: inline-block; width: 18px; }
 
         .loading {
             text-align: center;
-            padding: 60px 20px;
+            padding: 40px 20px;
             color: var(--text-secondary);
         }
 
         .loading-spinner {
             display: inline-block;
-            width: 40px;
-            height: 40px;
-            border: 3px solid var(--border-color);
-            border-top-color: var(--accent-cyan);
+            width: 28px;
+            height: 28px;
+            border: 2px solid var(--border-color);
+            border-top-color: var(--accent);
             border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-bottom: 16px;
+            animation: spin 0.8s linear infinite;
+            margin-bottom: 12px;
         }
 
         @keyframes spin {
@@ -120,47 +83,24 @@
         }
 
         .error {
-            background: rgba(255, 71, 87, 0.1);
-            border: 1px solid var(--accent-red);
+            background: var(--bg-card);
+            border: 1px solid var(--red);
             border-radius: 8px;
-            padding: 24px;
-            color: var(--accent-red);
+            padding: 20px;
+            color: var(--red);
             text-align: center;
         }
 
         .error-title {
-            font-size: 18px;
-            font-weight: 700;
-            margin-bottom: 8px;
-        }
-
-        @media (max-width: 768px) {
-            .page-title {
-                font-size: 24px;
-            }
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 4px;
         }
     </style>
 </head>
 <body>
 
-<header>
-    <div class="container">
-        <nav>
-            <a href="index.html" class="logo">GO2RTC</a>
-            <div class="nav-links">
-                <a href="index.html" class="nav-link">Streams</a>
-                <a href="add.html" class="nav-link">Add Stream</a>
-                <a href="config.html" class="nav-link">Config</a>
-                <a href="log.html" class="nav-link">Logs</a>
-                <a href="net.html" class="nav-link">Network</a>
-            </div>
-            <a href="https://github.com/AlexxIT/go2rtc" target="_blank" class="nav-link docs-link">docs</a>
-            <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
-                <span class="theme-icon">🌙</span>
-            </button>
-        </nav>
-    </div>
-</header>
+<script src="main.js"></script>
 
 <main>
     <div class="container">
@@ -168,60 +108,19 @@
 
         <div class="page-header">
             <h1 class="page-title">Stream Probe</h1>
-            <p class="page-subtitle">Detailed codec and stream analysis for: <span class="stream-name-display" id="stream-name"></span></p>
+            <p class="page-subtitle">Codec analysis for: <span class="stream-name-display" id="stream-name"></span></p>
         </div>
 
         <div id="content">
             <div class="loading">
                 <div class="loading-spinner"></div>
-                <div>Probing stream (video=all, audio=all, microphone)...</div>
+                <div>Probing stream...</div>
             </div>
         </div>
     </div>
 </main>
 
 <script>
-    // Theme management
-    function initTheme() {
-        const savedTheme = localStorage.getItem('theme');
-        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
-
-        setTheme(theme);
-
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-            if (!localStorage.getItem('theme')) {
-                setTheme(e.matches ? 'dark' : 'light');
-            }
-        });
-    }
-
-    function setTheme(theme) {
-        const html = document.documentElement;
-        const themeIcon = document.querySelector('.theme-icon');
-
-        if (theme === 'light') {
-            html.setAttribute('data-theme', 'light');
-            if (themeIcon) themeIcon.textContent = '☀️';
-        } else {
-            html.removeAttribute('data-theme');
-            if (themeIcon) themeIcon.textContent = '🌙';
-        }
-    }
-
-    function toggleTheme() {
-        const html = document.documentElement;
-        const currentTheme = html.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
-        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-
-        setTheme(newTheme);
-        localStorage.setItem('theme', newTheme);
-    }
-
-    initTheme();
-    document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
-
-    // Get stream name from URL
     const urlParams = new URLSearchParams(window.location.search);
     const streamName = urlParams.get('src');
 
@@ -235,7 +134,6 @@
     } else {
         document.getElementById('stream-name').textContent = decodeURIComponent(streamName);
 
-        // Fetch stream probe info
         const url = new URL('api/streams', location.href);
         url.searchParams.set('src', streamName);
         url.searchParams.set('video', 'all');
@@ -262,14 +160,11 @@
 
     function displayProbe(data) {
         const content = document.getElementById('content');
-
         let html = '<div class="info-card">';
         html += '<div class="card-title">Probe Results</div>';
         html += '<div class="json-viewer">';
         html += formatJSON(data, 0);
-        html += '</div>';
-        html += '</div>';
-
+        html += '</div></div>';
         content.innerHTML = html;
     }
 
@@ -277,27 +172,13 @@
         const indentStr = '<span class="json-indent"></span>'.repeat(indent);
         let html = '';
 
-        if (obj === null) {
-            return `<span class="json-null">null</span>`;
-        }
-
-        if (typeof obj === 'string') {
-            return `<span class="json-string">"${escapeHtml(obj)}"</span>`;
-        }
-
-        if (typeof obj === 'number') {
-            return `<span class="json-number">${obj}</span>`;
-        }
-
-        if (typeof obj === 'boolean') {
-            return `<span class="json-boolean">${obj}</span>`;
-        }
+        if (obj === null) return `<span class="json-null">null</span>`;
+        if (typeof obj === 'string') return `<span class="json-string">"${escapeHtml(obj)}"</span>`;
+        if (typeof obj === 'number') return `<span class="json-number">${obj}</span>`;
+        if (typeof obj === 'boolean') return `<span class="json-boolean">${obj}</span>`;
 
         if (Array.isArray(obj)) {
-            if (obj.length === 0) {
-                return '<span class="json-bracket">[]</span>';
-            }
-
+            if (obj.length === 0) return '<span class="json-bracket">[]</span>';
             html += '<span class="json-bracket">[</span>\n';
             obj.forEach((item, i) => {
                 html += '<div class="json-line">' + indentStr + '<span class="json-indent"></span>';
@@ -311,10 +192,7 @@
 
         if (typeof obj === 'object') {
             const keys = Object.keys(obj);
-            if (keys.length === 0) {
-                return '<span class="json-bracket">{}</span>';
-            }
-
+            if (keys.length === 0) return '<span class="json-bracket">{}</span>';
             html += '<span class="json-bracket">{</span>\n';
             keys.forEach((key, i) => {
                 html += '<div class="json-line">' + indentStr + '<span class="json-indent"></span>';
diff --git a/www/styles.css b/www/styles.css
index 1850e95c..df88f226 100644
--- a/www/styles.css
+++ b/www/styles.css
@@ -1,38 +1,34 @@
 /* CSS Variables - Theme colors */
 :root {
-    --bg-primary: #0a0e14;
-    --bg-secondary: #151b24;
-    --bg-card: #1a2332;
-    --border-color: #2a3544;
-    --text-primary: #e6edf3;
-    --text-secondary: #8b949e;
-    --text-muted: #6e7681;
-    --accent-cyan: #00d9ff;
-    --accent-electric: #00ffff;
-    --accent-red: #ff4757;
-    --accent-green: #2ecc71;
-    --accent-yellow: #ffd93d;
-    --glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
-    --glow-red: 0 0 20px rgba(255, 71, 87, 0.3);
-    --glow-green: 0 0 20px rgba(46, 204, 113, 0.3);
+    --bg-primary: #111827;
+    --bg-secondary: #1f2937;
+    --bg-card: #1f2937;
+    --border-color: #374151;
+    --text-primary: #f3f4f6;
+    --text-secondary: #9ca3af;
+    --text-muted: #6b7280;
+    --accent: #3b82f6;
+    --accent-hover: #60a5fa;
+    --accent-bg: rgba(59, 130, 246, 0.1);
+    --red: #ef4444;
+    --green: #22c55e;
+    --yellow: #eab308;
 }
 
 [data-theme="light"] {
-    --bg-primary: #f5f7fa;
+    --bg-primary: #f9fafb;
     --bg-secondary: #ffffff;
     --bg-card: #ffffff;
-    --border-color: #e1e4e8;
-    --text-primary: #24292e;
-    --text-secondary: #586069;
-    --text-muted: #6a737d;
-    --accent-cyan: #0366d6;
-    --accent-electric: #005cc5;
-    --accent-red: #d73a49;
-    --accent-green: #28a745;
-    --accent-yellow: #ffd33d;
-    --glow-cyan: 0 0 10px rgba(3, 102, 214, 0.2);
-    --glow-red: 0 0 10px rgba(215, 58, 73, 0.2);
-    --glow-green: 0 0 10px rgba(40, 167, 69, 0.2);
+    --border-color: #e5e7eb;
+    --text-primary: #111827;
+    --text-secondary: #6b7280;
+    --text-muted: #9ca3af;
+    --accent: #2563eb;
+    --accent-hover: #3b82f6;
+    --accent-bg: rgba(37, 99, 235, 0.08);
+    --red: #dc2626;
+    --green: #16a34a;
+    --yellow: #ca8a04;
 }
 
 /* Reset */
@@ -46,107 +42,49 @@
 body {
     background: var(--bg-primary);
     color: var(--text-primary);
-    font-family: 'JetBrains Mono', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     font-size: 14px;
-    line-height: 1.6;
+    line-height: 1.5;
     min-height: 100vh;
-    overflow-x: hidden;
     display: flex;
     flex-direction: column;
 }
 
-/* Scan line effect */
-body::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: repeating-linear-gradient(
-        0deg,
-        rgba(0, 0, 0, 0.05) 0px,
-        rgba(0, 0, 0, 0.05) 1px,
-        transparent 1px,
-        transparent 2px
-    );
-    pointer-events: none;
-    z-index: 9999;
-    opacity: 0.3;
-}
-
-/* Animated gradient background */
-body::after {
-    content: '';
-    position: fixed;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(
-        circle at 50% 50%,
-        rgba(0, 217, 255, 0.03) 0%,
-        transparent 50%
-    );
-    animation: rotateGradient 20s linear infinite;
-    pointer-events: none;
-    z-index: 0;
-}
-
-@keyframes rotateGradient {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
 /* Container */
 .container {
-    max-width: 1400px;
+    max-width: 1200px;
     margin: 0 auto;
-    padding: 0 24px;
-    position: relative;
-    z-index: 1;
+    padding: 0 16px;
 }
 
 /* Header */
 header {
     background: var(--bg-secondary);
-    border-bottom: 2px solid var(--accent-cyan);
-    box-shadow: var(--glow-cyan);
+    border-bottom: 1px solid var(--border-color);
     position: sticky;
     top: 0;
     z-index: 100;
-    backdrop-filter: blur(10px);
 }
 
 nav {
     display: flex;
     align-items: center;
-    gap: 32px;
-    padding: 20px 0;
+    gap: 20px;
+    padding: 10px 0;
 }
 
 .logo {
-    font-family: 'Orbitron', sans-serif;
-    font-weight: 900;
-    font-size: 28px;
-    color: var(--accent-cyan);
-    text-shadow: var(--glow-cyan);
-    letter-spacing: 2px;
+    font-weight: 700;
+    font-size: 18px;
+    color: var(--accent);
     text-decoration: none;
-    position: relative;
-    animation: glitch 3s infinite;
-}
-
-@keyframes glitch {
-    0%, 90%, 100% { transform: translate(0); }
-    91% { transform: translate(-2px, 1px); }
-    92% { transform: translate(2px, -1px); }
-    93% { transform: translate(-1px, 2px); }
+    letter-spacing: 0.5px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
 .nav-links {
     display: flex;
-    gap: 24px;
+    gap: 2px;
     align-items: center;
     flex: 1;
 }
@@ -154,43 +92,35 @@ nav {
 .nav-link {
     color: var(--text-secondary);
     text-decoration: none;
-    font-weight: 500;
-    text-transform: uppercase;
-    font-size: 12px;
-    letter-spacing: 1px;
-    padding: 8px 16px;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    position: relative;
-    overflow: hidden;
+    font-size: 13px;
+    padding: 6px 12px;
+    border-radius: 6px;
+    transition: color 0.15s, background 0.15s;
 }
 
-.nav-link::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
+.nav-link::after {
+    content: none;
 }
 
-.nav-link:hover::before {
-    left: 100%;
+.nav-link:hover {
+    color: var(--text-primary);
+    background: var(--bg-primary);
+    text-decoration: none;
 }
 
-.nav-link:hover,
 .nav-link.active {
-    color: var(--accent-cyan);
-    border-color: var(--accent-cyan);
-    box-shadow: var(--glow-cyan);
+    color: var(--accent);
+    background: var(--accent-bg);
 }
 
 .docs-link {
-    font-size: 11px;
-    padding: 4px 10px;
-    opacity: 0.6;
+    font-size: 12px;
     margin-left: auto;
+    opacity: 0.6;
+}
+
+.docs-link::after {
+    content: none;
 }
 
 .docs-link:hover {
@@ -199,28 +129,29 @@ nav {
 
 /* Theme toggle */
 .theme-toggle {
-    width: 48px;
-    height: 48px;
-    border: none;
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--border-color);
     border-radius: 6px;
-    background: var(--bg-card);
-    color: var(--accent-cyan);
+    background: transparent;
+    color: var(--text-secondary);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 20px;
-    margin-left: auto;
+    font-size: 16px;
+    transition: border-color 0.15s;
 }
 
 .theme-toggle:hover {
-    background: var(--accent-cyan);
-    color: var(--bg-primary);
+    border-color: var(--accent);
+    color: var(--accent);
+    background: transparent;
 }
 
 /* Main content */
 main {
-    padding: 40px 0;
+    padding: 24px 0;
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -230,21 +161,21 @@ main {
 form {
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
+    gap: 8px;
 }
 
 input[type="text"],
 input[type="email"],
 input[type="password"],
 select {
-    padding: 10px 16px;
+    padding: 7px 10px;
     border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 14px;
+    border-radius: 6px;
+    font-size: 13px;
     background: var(--bg-card);
     color: var(--text-primary);
-    font-family: 'JetBrains Mono', monospace;
-    transition: all 0.3s;
+    font-family: inherit;
+    transition: border-color 0.15s;
 }
 
 input[type="text"]:focus,
@@ -252,35 +183,31 @@ input[type="email"]:focus,
 input[type="password"]:focus,
 select:focus {
     outline: none;
-    border-color: var(--accent-cyan);
-    box-shadow: var(--glow-cyan);
+    border-color: var(--accent);
 }
 
 button {
-    padding: 10px 20px;
-    border: 1px solid var(--accent-cyan);
-    border-radius: 4px;
+    padding: 7px 14px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 13px;
     background: var(--bg-card);
-    color: var(--accent-cyan);
-    font-family: 'JetBrains Mono', monospace;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--text-primary);
+    font-family: inherit;
+    transition: border-color 0.15s, background 0.15s;
 }
 
 button:hover {
-    background: var(--accent-cyan);
-    color: var(--bg-primary);
-    box-shadow: var(--glow-cyan);
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--bg-card);
 }
 
 /* Checkbox */
 label {
     display: flex;
-    gap: 8px;
+    gap: 6px;
     align-items: center;
     cursor: pointer;
     color: var(--text-secondary);
@@ -288,19 +215,20 @@ label {
 
 input[type="checkbox"] {
     appearance: none;
-    width: 18px;
-    height: 18px;
-    border: 2px solid var(--border-color);
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--border-color);
     border-radius: 3px;
     cursor: pointer;
     position: relative;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.15s;
+    background: var(--bg-card);
+    flex-shrink: 0;
 }
 
 input[type="checkbox"]:checked {
-    background: var(--accent-cyan);
-    border-color: var(--accent-cyan);
-    box-shadow: var(--glow-cyan);
+    background: var(--accent);
+    border-color: var(--accent);
 }
 
 input[type="checkbox"]:checked::after {
@@ -309,8 +237,8 @@ input[type="checkbox"]:checked::after {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    color: var(--bg-primary);
-    font-size: 12px;
+    color: #fff;
+    font-size: 11px;
     font-weight: 700;
 }
 
@@ -319,91 +247,76 @@ table {
     width: 100%;
     background: var(--bg-card);
     border-collapse: collapse;
-    margin: 0 auto;
     overflow: hidden;
-    border-radius: 8px;
     border: 1px solid var(--border-color);
+    border-radius: 8px;
 }
 
 th,
 td {
-    padding: 12px 15px;
+    padding: 10px 14px;
     text-align: left;
     border-bottom: 1px solid var(--border-color);
 }
 
 th {
     background: var(--bg-secondary);
-    color: var(--accent-cyan);
-    font-weight: 700;
-    text-transform: uppercase;
-    font-size: 11px;
-    letter-spacing: 1px;
+    color: var(--text-secondary);
+    font-weight: 600;
+    font-size: 12px;
 }
 
-tr:nth-child(even) {
-    background: rgba(255, 255, 255, 0.02);
+tr:last-child td {
+    border-bottom: none;
 }
 
 tr:hover {
-    background: rgba(0, 217, 255, 0.05);
-    transition: background-color 0.3s ease;
+    background: var(--accent-bg);
+    transition: background-color 0.15s ease;
 }
 
 /* Links */
 a {
-    color: var(--accent-cyan);
+    color: var(--accent);
     text-decoration: none;
-    position: relative;
-    transition: color 0.3s;
+    transition: color 0.15s;
 }
 
 a::after {
-    content: '';
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    width: 0;
-    height: 1px;
-    background: var(--accent-cyan);
-    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    content: none;
 }
 
 a:hover {
-    color: var(--accent-electric);
-}
-
-a:hover::after {
-    width: 100%;
+    color: var(--accent-hover);
+    text-decoration: underline;
 }
 
 .link-separator {
     color: var(--text-muted);
-    margin: 0 8px;
+    margin: 0 4px;
 }
 
 /* Responsive */
 @media (max-width: 768px) {
     nav {
-        gap: 16px;
-        padding: 12px 0;
+        gap: 12px;
+        padding: 8px 0;
         flex-wrap: wrap;
     }
 
     .logo {
-        font-size: 20px;
+        font-size: 16px;
         flex-shrink: 0;
     }
 
     .nav-links {
         order: 3;
         flex: 1 1 100%;
-        gap: 8px;
+        gap: 2px;
         overflow-x: auto;
         overflow-y: hidden;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
-        padding-bottom: 4px;
     }
 
     .nav-links::-webkit-scrollbar {
@@ -412,8 +325,8 @@ a:hover::after {
 
     .nav-link {
         flex-shrink: 0;
-        font-size: 11px;
-        padding: 6px 12px;
+        font-size: 12px;
+        padding: 4px 8px;
     }
 
     .docs-link {
@@ -441,27 +354,25 @@ a:hover::after {
     }
 
     tr {
-        margin-bottom: 10px;
-        border-radius: 4px;
+        margin-bottom: 8px;
+        border-radius: 6px;
     }
 }
 
 .back-link {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
-    color: var(--accent-cyan);
+    gap: 4px;
+    color: var(--accent);
     text-decoration: none;
-    font-weight: 500;
-    padding: 8px 16px;
-    border: 1px solid var(--accent-cyan);
-    border-radius: 6px;
-    transition: all 0.3s;
-    margin-bottom: 24px;
+    font-size: 13px;
+    margin-bottom: 16px;
+}
+
+.back-link::after {
+    content: none;
 }
 
 .back-link:hover {
-    background: var(--accent-cyan);
-    color: var(--bg-primary);
-    box-shadow: var(--glow-cyan);
-}
\ No newline at end of file
+    text-decoration: underline;
+}