From 026fc4bc00044c3371be410e98d19a8c718da9d8 Mon Sep 17 00:00:00 2001
From: sabo <s.sabev@inex-project.net>
Date: Thu, 27 Aug 2026 09:33:15 +0300
Subject: [PATCH] Restyle tabs: plain labels and light-blue tab bar.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 webapp/templates/viewer.html | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/webapp/templates/viewer.html b/webapp/templates/viewer.html
index 9a8b8fc..ea7c765 100644
--- a/webapp/templates/viewer.html
+++ b/webapp/templates/viewer.html
@@ -46,14 +46,23 @@
   header .pfx { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.85); }
   .gen-time { font-size: 11px; color: rgba(255,255,255,.80); margin-left: auto; font-family: var(--mono); }
 
-  .tabs { display: flex; gap: 2px; padding: 0 24px; background: var(--bg2); border-bottom: 1px solid var(--border); }
-  .tab {
-    padding: 10px 20px; font-size: 13px; font-family: var(--mono); color: var(--muted);
-    cursor: pointer; border-bottom: 2px solid transparent;
-    transition: color .15s, border-color .15s; user-select: none;
+  .tabs {
+    display: flex; gap: 4px; padding: 0 24px;
+    background: linear-gradient(180deg, #d6e4f7 0%, #e8f0fa 100%);
+    border-bottom: 1px solid #b7c9e3;
   }
-  .tab.active { color: var(--accent); border-color: var(--accent); }
-  .tab:hover:not(.active) { color: var(--text); }
+  .tab {
+    padding: 11px 18px; font-size: 13px; font-family: var(--sans); font-weight: 500;
+    color: #3d5a80; cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: color .15s, border-color .15s, background .15s;
+    user-select: none; border-radius: 6px 6px 0 0;
+  }
+  .tab.active {
+    color: #1e4a8c; border-color: #2d5fb0;
+    background: rgba(255,255,255,.55);
+  }
+  .tab:hover:not(.active) { color: #1a1a2e; background: rgba(255,255,255,.28); }
 
   .panel { display: none; padding: 20px 24px; }
   .panel.active { display: block; }
@@ -255,10 +264,10 @@
 </header>
 
 <div class="tabs">
-  {% if home_url %}<div class="tab active" onclick="switchTab('home')">00 / Home</div>{% endif %}
-  <div class="tab {% if not home_url %}active{% endif %}" onclick="switchTab('editor')">01 / Редактор</div>
-  <div class="tab" onclick="switchTab('search')">02 / Търсене</div>
-  <div class="tab" onclick="switchTab('generator')">03 / Генератор</div>
+  {% if home_url %}<div class="tab active" onclick="switchTab('home')">Начало</div>{% endif %}
+  <div class="tab {% if not home_url %}active{% endif %}" onclick="switchTab('editor')">Ключови думи</div>
+  <div class="tab" onclick="switchTab('search')">Търсене</div>
+  <div class="tab" onclick="switchTab('generator')">Документ</div>
 </div>
 
 {% if home_url %}