.glass {
  background: var(--glass-bg, linear-gradient(145deg, rgba(60, 0, 80, 0.4), rgba(30, 0, 50, 0.25)));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(var(--glass-blur, 14px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 14px));
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.3);
}

.glass:hover {
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(34, 167, 240, 0.25);
  transform: translateY(-2px);
}

.glass-avatar{
  background: var(--glass-bg, linear-gradient(145deg, rgba(60, 0, 80, 0.4), rgba(30, 0, 50, 0.25)));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(var(--glass-blur, 14px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 14px));
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(34, 167, 240, 0.25);
}

/* Optional: Hover sweep effect */
.glass-sweep {
  position: relative;
  overflow: hidden;
}

.glass-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.glass-sweep:hover::before {
  animation: light-sweep 0.7s ease-in-out;
}

@keyframes light-sweep {
  from { left: -150%; }
  to { left: 150%; }
}