From d9735d6b71eb8153e29ea7b48135113c7de369ae Mon Sep 17 00:00:00 2001
From: "d.klimov" <d.klimov@arenadata.io>
Date: Wed, 22 Jul 2026 23:27:20 +0300
Subject: [PATCH] =?UTF-8?q?design:=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D1=83=D1=81=D1=82=D1=80=D0=BE=D0=B9=D1=81=D1=82?=
 =?UTF-8?q?=D0=B2=20=E2=80=94=20=D1=81=D1=82=D0=B5=D0=BA=D0=BB=D1=8F=D0=BD?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B5=20off-=D1=81=D0=BE=D1=81=D1=82=D0=BE=D1=8F?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20+=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BA=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D1=81=D1=82=D1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DeviceCard.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/DeviceCard.tsx b/components/DeviceCard.tsx
index b2d3e81..4bdbbc3 100644
--- a/components/DeviceCard.tsx
+++ b/components/DeviceCard.tsx
@@ -92,9 +92,11 @@ export default function DeviceCard({
   const activeGlow = `color-mix(in srgb, ${accent} 22%, transparent)`
 
   return (
-    <div style={{
-      background: isOn ? activeBg : 'var(--surface-1)',
-      border: `1px solid ${isOn ? activeBorder : 'var(--border-subtle)'}`,
+    <div className="card-interactive" style={{
+      background: isOn
+        ? activeBg
+        : 'linear-gradient(155deg, color-mix(in srgb, var(--surface-3) 92%, transparent), color-mix(in srgb, var(--surface-1) 88%, transparent))',
+      border: `1px solid ${isOn ? activeBorder : 'rgba(160,168,255,0.14)'}`,
       borderRadius: 22,
       padding: '20px 18px 18px',
       minHeight: 160,
@@ -102,7 +104,11 @@ export default function DeviceCard({
       flexDirection: 'column',
       justifyContent: 'space-between',
       transition: 'all 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
-      boxShadow: isOn ? `0 8px 32px -12px ${activeGlow}` : 'var(--shadow-sm)',
+      boxShadow: isOn
+        ? `0 12px 36px -12px ${activeGlow}, inset 0 1px 0 rgba(255,255,255,0.08)`
+        : 'var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08)',
+      WebkitBackdropFilter: 'blur(16px)',
+      backdropFilter: 'blur(16px)',
       position: 'relative',
       overflow: 'hidden',
       opacity: isMock ? 0.88 : 1,