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,