From 7d478c1c1b39fa48389e70fc80ca989318b97000 Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Mon, 1 Jun 2026 09:51:39 +0300
Subject: [PATCH] =?UTF-8?q?style(dashboard):=20=D1=80=D0=B5=D0=B4=D0=B8?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=B9=D0=BD=20sticky-=D1=88=D0=B0=D0=BF=D0=BA?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Аватар: 48px + violet glow shadow
- Шапка: высота 68px, blur 16px, border rgba(violet .1), box-shadow
- Статы: пилл-обёртка с фиолетовым тинтом и бордером; разделители между кольцами
- Stat rings: горизонтальный layout SVG(36px) + sr-val + sr-label; значение вынесено из SVG наружу — читается крупно цветным шрифтом

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/dashboard.html | 49 +++++++++++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index 8e1ef88..932c737 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -16,17 +16,19 @@
     /* ── ZONE 1: Compact Header (sticky) ── */
     .dash-header {
       display: flex; align-items: center; gap: 18px;
-      height: 64px; padding: 0 28px;
-      background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
-      border-bottom: 1px solid rgba(15,23,42,0.08);
+      height: 68px; padding: 0 28px;
+      background: rgba(255,255,255,0.93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
+      border-bottom: 1px solid rgba(155,93,229,.1);
+      box-shadow: 0 2px 14px rgba(15,23,42,.05);
       position: sticky; top: 0; z-index: 90;
     }
     .dh-avatar {
-      width: 44px; height: 44px; border-radius: 50%;
+      width: 48px; height: 48px; border-radius: 50%;
       background: var(--grad-1);
       display: flex; align-items: center; justify-content: center;
-      font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800; color: #fff;
+      font-family: 'Unbounded', sans-serif; font-size: 0.92rem; font-weight: 800; color: #fff;
       flex-shrink: 0;
+      box-shadow: 0 4px 16px rgba(155,93,229,.4);
     }
     .dh-text { flex: 1; min-width: 0; }
     .dh-greeting {
@@ -35,9 +37,20 @@
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
     .dh-sub { font-size: 0.78rem; color: var(--text-3); font-weight: 500; margin-top: 2px; }
-    .dh-stats { display: flex; gap: 14px; flex-shrink: 0; }
-    .stat-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; }
-    .stat-ring .sr-label { font-size: 0.62rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
+    .dh-stats {
+      display: flex; gap: 0; flex-shrink: 0;
+      background: rgba(155,93,229,.05);
+      border: 1.5px solid rgba(155,93,229,.14);
+      border-radius: 16px; padding: 8px 4px;
+    }
+    .stat-ring {
+      display: flex; flex-direction: row; align-items: center; gap: 9px;
+      padding: 0 14px;
+    }
+    .stat-ring + .stat-ring { border-left: 1px solid rgba(155,93,229,.12); }
+    .stat-ring .sr-text { display: flex; flex-direction: column; gap: 1px; }
+    .stat-ring .sr-val { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; line-height: 1.1; }
+    .stat-ring .sr-label { font-size: 0.56rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
 
     /* ── ZONE 2: Action Banner + Cards ── */
     .action-zone { margin-bottom: 22px; }
@@ -1396,8 +1409,8 @@
       .lb-widget { padding: 14px; }
 
       /* Header stats */
-      .dh-stats { gap: 8px; }
-      .stat-ring { min-width: 60px; }
+      .dh-stats { gap: 0; flex-wrap: wrap; padding: 6px 4px; }
+      .stat-ring { padding: 4px 10px; gap: 7px; }
       .dh-greeting { font-size: 0.82rem; }
 
       /* Admin quick actions: narrow */
@@ -2120,16 +2133,18 @@
     /* ══ STAT RING SVG HELPER ════════════════════════════════════════════ */
     function statRingSvg(value, max, color, label) {
       const pct = max > 0 ? Math.min(100, Math.round(value / max * 100)) : 0;
-      const r = 15, circ = 2 * Math.PI * r;
+      const r = 13, circ = 2 * Math.PI * r;
       const dash = (pct / 100 * circ).toFixed(1);
-      return `<svg width="40" height="40" viewBox="0 0 40 40">
-        <circle cx="20" cy="20" r="${r}" fill="none" stroke="rgba(15,23,42,0.07)" stroke-width="4"/>
-        <circle cx="20" cy="20" r="${r}" fill="none" stroke="${color}" stroke-width="4"
+      return `<svg width="36" height="36" viewBox="0 0 36 36">
+        <circle cx="18" cy="18" r="${r}" fill="none" stroke="rgba(15,23,42,0.08)" stroke-width="4"/>
+        <circle cx="18" cy="18" r="${r}" fill="none" stroke="${color}" stroke-width="4"
           stroke-dasharray="${dash} ${circ.toFixed(1)}" stroke-linecap="round"
-          transform="rotate(-90 20 20)"/>
-        <text x="20" y="24" text-anchor="middle" font-family="Unbounded,sans-serif" font-size="9" font-weight="800" fill="${color}">${value}</text>
+          transform="rotate(-90 18 18)"/>
       </svg>
-      <span class="sr-label">${label}</span>`;
+      <span class="sr-text">
+        <span class="sr-val" style="color:${color}">${value}</span>
+        <span class="sr-label">${label}</span>
+      </span>`;
     }
 
     /* ══ STATS STRIP ═════════════════════════════════════════════════════ */